<template>
    <el-card>
        <el-form :class="['dialog-form', disabled && 'dialog-form-disabled']" ref="dialogForm" :model="form" :rules="rules" :disabled="disabled" label-width="120px">
            <el-collapse v-model="activeNames">
                <el-collapse-item name="1">
                    <template #title><scTitle>法律事务报告书</scTitle></template>
                    <el-row :gutter="15">
                        <el-col :lg="lg" :md="12" :xs="24">
                            <el-form-item label="报送单位:" prop="reportCompanyName">
                                <el-input v-model="form.reportCompanyName" placeholder="请输入报送单位"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :lg="lg" :md="12" :xs="24">
                            <el-form-item label="案件性质:" prop="caseNature">
                                <dict-select v-model="form.caseNature" dic="case_nature" filterable placeholder="请选择案件性质"></dict-select>
                            </el-form-item>
                        </el-col>
                        <el-col :lg="lg" :md="12" :xs="24">
                            <el-form-item label="我方地位:" prop="ourPosition">
                                <dict-select v-model="form.ourPosition" dic="our_position" filterable placeholder="请选择我方地位"></dict-select>
                            </el-form-item>
                        </el-col>
                        <el-col :lg="lg" :md="12" :xs="24">
                            <el-form-item label="相对方名称:" prop="oppositeName">
                                <el-input v-model="form.oppositeName" placeholder="请输入相对方名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :lg="lg" :md="12" :xs="24">
                            <el-form-item label="签收文件名称:" prop="signFileName">
                                <el-input v-model="form.signFileName" placeholder="请输入签收文件名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :lg="lg" :md="12" :xs="24">
                            <el-form-item label="签收时间:" prop="signDate">
                                <el-date-picker v-model="form.signDate" value-format="YYYY-MM-DD" placeholder="请选择签收时间"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24">
                            <el-form-item label="案由:" prop="caseCause">
                                <el-input v-model="form.caseCause" type="textarea" placeholder="请输入案由"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24">
                            <el-form-item label="事项概述:" prop="matterOverview">
                                <el-input v-model="form.matterOverview" type="textarea" placeholder="请输入事项概述"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-collapse-item>
                <el-collapse-item name="2">
                    <template #title><scTitle>外部律师选聘内容</scTitle></template>
                    <el-row :gutter="15">
                        <el-col :xs="24">
                            <el-form-item label="实施(服务)要求:" prop="implementRequire">
                                <el-input v-model="form.implementRequire" type="textarea" placeholder="请输入实施(服务)要求"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24">
                            <el-form-item label="服务期限:" prop="servicePeriod">
                                <el-input v-model="form.servicePeriod" placeholder="请输入服务期限"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24">
                            <el-form-item label="附件上传:">
                                <sc-upload-file v-model="form.folders['purchase/law'].entities" :limit="10">
                                    <el-button type="primary" icon="el-icon-upload" size="small"></el-button>
                                </sc-upload-file>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-collapse-item>
                <el-collapse-item name="3">
                    <template #title><scTitle>推荐律师事务所</scTitle></template>
                    <el-row>
                        <el-col :xs="24">
                            <el-form-item prop="lawFirm" label-width="0">
                                <dict-select v-model="form.lawFirm" dic="law_firm" multiple filterable placeholder="请选择律师事务所"></dict-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-collapse-item>
            </el-collapse>
        </el-form>
    </el-card>
</template>

<script>
	export default {
		props: {
			modelValue: { type: Object, default: () => {} },
			lg: { type: Number, default: 8 },
			disabled: { type: Boolean, default: false }
		},

		data() {
			return {
                activeNames: ["1", "2", "3"],

				form: {
					reportCompanyName: null,
					caseNature: null,
					ourPosition: null,
					oppositeName: null,
					caseCause: null,
					signFileName: null,
					signDate: null,
					matterOverview: null,
					implementRequire: null,
					servicePeriod: null,
                    folders: {
						"purchase/law": {
							entities: []
						}
					},
                    lawFirm: []
				},
				rules: {
					// reportCompanyName: [{ required: true, message: "请输入报送单位" }],
					// caseNature: [{ required: true, message: "请选择案件性质" }],
					// ourPosition: [{ required: true, message: "请选择我方地位" }],
					// oppositeName: [{ required: true, message: "请输入相对方名称" }],
                    // signFileName: [{ required: true, message: "请输入签收文件名称" }],
					// signDate: [{ required: true, message: "请选择签收时间" }],
					// caseCause: [{ required: true, message: "请输入案由" }],
				}
			}
		},

        watch: {
            form: {
				deep: true,
				handler(val) {
					this.$emit("update:modelValue", this.formatLawyer(val));
				}
			}
        },

		methods: {
            setData(data) {
                for (const key in this.form) {
                    if (key == "lawFirm") this.form[key] = JSON.parse(data.lawFirm) && JSON.parse(data.lawFirm).map(l => l.name) || [];
                    else if (key == "folders") {
                        this.form[key] = {
                            "purchase/law": {
                                entities: data[key]["purchase/law"].entities.map(({ id, mineType, name, path }) => ({ id, mineType, name, path }))
                            }
                        }
                    } else this.form[key] = data[key];
                }
            },

            formatLawyer(val) {
                const data = {};
                for (const key in val) {
                    if (key == "lawFirm") data[key] = JSON.stringify(val[key].map(name => ({ name })));
                    else if (key == "folders") {
                        const lawFiles = val[key]["purchase/law"].entities.filter(item => !item.id).map(item => item.path);
                        if (lawFiles.length) {
                            data[key] = {
                                "purchase/law": {
                                    entities: lawFiles.map(ticket => ({ features: { ticket } }))
                                }
                            };
                        }
                    } else data[key] = val[key];
                }

                return data;
            }
		}
	}
</script>

<style lang="scss" scoped>
.el-card {
  margin-bottom: 18px;

  :deep(.el-card__body) {
    padding-top: 0;

    .el-collapse {
      border: none;

      .el-collapse-item__content {
        margin-top: 10px;
        padding-bottom: 0;
      }
    }
  }
}
</style>