<template>
    <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk"
             @cancel="handleCancel" cancelText="关闭">
        <a-spin :spinning="confirmLoading">
            <a-form :form="form">

                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="演员姓名">
                    <a-input placeholder="请输入演员姓名" v-decorator="['name', validatorRules.name ]"/>
                </a-form-item>
                <a-form-item label="封面" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <uploadFile :value.sync="coverUrl" :fileCount="1" uploadType="image" :multiple="false"
                                :sizeCheck="false"/>
                </a-form-item>
                <a-form-item label="照片" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="!model.name">
                    <uploadFile :value.sync="imageUrl" :fileCount="10" uploadType="image" :sizeCheck="false"/>
                </a-form-item>
                <a-form-item label="视频作品" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="!model.name">
                    <uploadFile :value.sync="videoUrl" :fileCount="10" uploadType="video" :sizeCheck="false"/>
                </a-form-item>

                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="城市">
                    <a-select
                        v-decorator="['actorCity', validatorRules.phone ]"
                        placeholder="请选择城市"
                        showSearch
                        optionFilterProp="children"
                        :filterOption="filterOption"
                        allow-clear

                    >
                        <a-select-option
                            :value="item.cityId"
                            v-for="(item, index) of cityList"
                            :key="index"
                        >
                            {{ item.cityName }}
                        </a-select-option>
                    </a-select>
                </a-form-item>


                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="手机号码">
                    <a-input placeholder="请输入手机号码" v-decorator="['phone', validatorRules.phone ]"></a-input>
                </a-form-item>

                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="身份证号">
                    <a-input placeholder="请输入身份证号" v-decorator="['idCard', validatorRules.idCard ]"></a-input>
                </a-form-item>

                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单价/时薪">
                    <a-input placeholder="请输入手机号码"
                             v-decorator="['unitPrice', validatorRules.unitPrice ]"></a-input>
                </a-form-item>

                <a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-select v-decorator="[ 'sex', {}]" placeholder="请选择性别">
                        <a-select-option :value="1">男</a-select-option>
                        <a-select-option :value="2">女</a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item label="身高" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input placeholder="请输入身高" addonAfter="cm"
                             v-decorator="['actorHeight']"></a-input>

                </a-form-item>

                <a-form-item label="体重" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input placeholder="请输入体重" addonAfter="kg"
                             v-decorator="['actorWeight']"></a-input>
                </a-form-item>
                <a-form-item label="三围" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input placeholder="请输入三围"
                             v-decorator="['actorThree']"></a-input>

                </a-form-item>

                <a-form-item label="鞋码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input placeholder="请输入鞋码" addonAfter='码'
                             v-decorator="['actorShoeSize']"></a-input>

                </a-form-item>


                <a-form-item label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-date-picker style="width: 100%" placeholder="请选择生日"
                                   v-decorator="['birthday', {initialValue:!model.birthday?null:moment(model.birthday,dateFormat)}]"/>
                </a-form-item>

                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="银行名称">
                    <a-input placeholder="请输入银行名称"
                             v-decorator="['bankName']"></a-input>
                </a-form-item>

                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="银行卡号">
                    <a-input placeholder="请输入银行名称"
                             v-decorator="['bankCode']"></a-input>
                </a-form-item>

                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="标签">
                    <a-input placeholder="请输入标签" v-decorator="['tagList']"/>
                </a-form-item>

                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注">
                    <a-input placeholder="请输入备注" v-decorator="['actorRemark']"/>
                </a-form-item>

            </a-form>
        </a-spin>
    </a-modal>
</template>

<script>
import uploadFile from '@/components/liveUploadFile.vue'
import {
    httpAction
} from '@/api/manage'
import pick from 'lodash.pick'
import JTreeSelect from '@/components/jeecg/JTreeSelect'
import moment from 'moment'
import UploadToAli from '@femessage/upload-to-ali'
import {actorList, getCityList} from "@api/actor";

export default {
    name: "ActorModal",
    components: {
        UploadToAli,
        JTreeSelect,
        uploadFile
    },
    data() {
        return {
            cityList: [],
            tagList: [],
            title: "操作",
            visible: false,
            model: {},
            videoUrl: [],
            imageUrl: [],
            coverUrl: "",
            customDomain: '',
            region: 'oss-cn-beijing',
            bucket: 'ctop-media',
            acceptVideo: 'video/mpeg,video/mp4',
            acceptImage: 'image/jpeg,image/jpg,image/png',
            accessKeyId: 'LTAIbNbqWzSOklQV',
            accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
            dateFormat: "YYYY-MM-DD",
            labelCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 5
                },
            },
            wrapperCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 16
                },
            },

            confirmLoading: false,
            form: this.$form.createForm(this),
            validatorRules: {
                name: {
                    rules: [{
                        required: true,
                        message: '请输入演员姓名!'
                    }]
                },

                phone: {
                    rules: [{
                        required: true,
                        message: '请输入手机号码!'
                    }]
                },
                idCard: {
                    rules: [{
                        required: true,
                        message: '请输入身份证号!'
                    }]
                },

                unitPrice: {
                    rules: [{
                        required: true,
                        message: '请输入单价/时薪!'
                    }]
                },

            },
            url: {
                add: "/ctop/actor/add",
                edit: "/ctop/actor/edit",
            },
        }
    },
    created() {
    },
    mounted() {
        console.log("哈哈哈哈哈")
        getCity();
    },
    methods: {
        getCity() {
            getCityList().then(res => {
                if (res.code == 0) {
                    this.cityList = res.result.records
                }
            })
        },

        filterOption(input, option) {
            return (
                option.componentOptions.children[0].text
                    .toLowerCase()
                    .indexOf(input.toLowerCase()) >= 0
            );
        },


        fileWater() {
            return new Promise(function (resolve, reject) {
            })
        },
        add() {
            this.imageUrl = []
            this.videoUrl = []
            this.coverUrl = ""
            this.edit({});
        },
        edit(record) {
            console.log(record)
            let that = this;
            that.form.resetFields();
            that.model = Object.assign({}, record);
            that.visible = true;
            that.coverUrl = record.coverUrl ? record.coverUrl : ''
            // that.imageUrl = ""
            // that.videoUrl = ""
            that.$nextTick(() => {
                that.form.setFieldsValue(pick(this.model, 'name', 'sex', 'speciality'))
                //时间格式化
            });

        },
        close() {
            this.$emit('close');
            this.visible = false;
        },
        moment,
        handleOk() {
            console.log(this.imageUrl)
            const that = this;
            // 触发表单验证
            this.form.validateFields((err, values) => {
                if (!err) {
                    that.confirmLoading = true;
                    let httpurl = '';
                    let method = '';
                    if (!this.model.id) {
                        httpurl += this.url.add;
                        method = 'post';
                    } else {
                        httpurl += this.url.edit;
                        method = 'put';
                    }
                    if (!values.birthday) {
                        values.birthday = '';
                    } else {
                        values.birthday = values.birthday.format(this.dateFormat);
                    }
                    values.imageUrl = this.imageUrl;
                    values.coverUrl = this.coverUrl
                    values.videoUrl = this.videoUrl;
                    let formData = Object.assign(this.model, values);
                    //时间格式化

                    console.log(formData)
                    httpAction(httpurl, formData, method).then((res) => {
                        if (res.success) {
                            that.$message.success(res.message);
                            that.$emit('ok');
                            that.$emit("updateList")
                            this.imageUrl = []
                            this.videoUrl = []
                            this.coverUrl = ""
                        } else {
                            that.$message.warning(res.message);
                        }
                    }).finally(() => {
                        that.confirmLoading = false;
                        that.close();
                    })


                }
            })
        },
        handleCancel() {
            this.close()
        },


    }
}
</script>

<style lang="less" scoped>

</style>