<template>
  <el-form
    ref="formRef"
    label-width="110px"
    size="mini"
    :rules="rules"
    :model="ruleForm"
    v-loading="loading"
  >
    <el-row>
      <el-col :span="8">
        <el-form-item label="是否合规" prop="is_check">
          <el-select v-model="ruleForm.is_check" size="mini" style="width:100%">
            <el-option
              v-for="option in options"
              :value="option.value"
              :label="option.label"
              :key="option.value"
            />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="所属平台" prop="platform_id" v-if="Number(ruleForm.is_check) === 2">
          <search-terrace
            :value="ruleForm.platform_id"
            :names="ruleForm.platform_name"
            :disabled="false"
            :isDetail="true"
            :size="'mini'"
            :is_show="'1'"
            :placeholder="'所属平台'"
            @searchChange="platform_idsearchChange"
          />
        </el-form-item>
      </el-col>

      <el-col :span="8" prop="managerid" v-if="Number(ruleForm.is_check) === 2">
        <el-form-item label="业务经理" prop="managerid" >
            <project-manager
              size="mini"
              :isDetail="true"
              :names="ruleForm.manager"
              :value="ruleForm.managerid"
              @searchChange="manageridChange"
            />
          </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="客户公司" prop="companyCode" v-if="Number(ruleForm.is_check) === 2">
          <search-customer
            :value="ruleForm.companyCode"
            :names="ruleForm.companyName"
            :is-detail="ruleForm.companyName"
            @searchChange="customerChange"
            :placeholder="'客户名称'"
            :size="'mini'"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="Number(ruleForm.is_check) === 2">
        <el-form-item label="平台商品编号" prop="plat_code">
          <el-input size="mini" v-model="ruleForm.plat_code" placeholder="平台商品编号" />
        </el-form-item>
      </el-col>

      <el-col>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.remark" type="textarea" />
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <div style="width:100%;display:flex;justify-content:flex-end;margin-bottom:10px">
          <el-button type="primary" size="mini" @click="onSubmit">保存</el-button>
        </div>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import asyncRequest from "@/apis/service/sellOut/filing";

export default {
  props: ["sitem"],
  data() {
    return {
      loading: false,
      ruleForm: {
        is_check: "2",
        companyName: "",
        companyCode: "",
        platform_name: "",
        platform_id: "",
        plat_code: "",
        manager:"",
        managerid:""
      },
      options: [
        { value: "1", label: "不合规" },
        { value: "2", label: "合规" }
      ]
    };
  },
  computed: {
    rules() {
      const { is_check } = this.ruleForm;
      return {
        managerid:[
          {
           type:'array',
           required: true,
           message: "请选择业务经理",
           trigger: "blur",
          }
        ],
        companyCode: [
          {
            required: Number(is_check) === 1,
            message: "请选择客户公司",
            trigger: "chnage"
          }
        ],
        platform_id: [
          {
            required: Number(is_check) === 2,
            message: "请选择所属平台",
            trigger: "chnage"
          }
        ],
        is_check: [
          {
            message: "请选择所属平台",
            trigger: "chnage",
            required: true
          }
        ],
        companyCode: [
          {
            required: Number(is_check) === 2,
            message: "请选择客户公司",
            trigger: "chnage"
          }
        ],
        plat_code: [
          {
            required: Number(is_check) === 2,
            message: "请输入平台商品编号",
            trigger: "change"
          }
        ],
        remark: [
          {
            required: Number(is_check) === 1,
            message: "请输入备注",
            trigger: "chnage"
          }
        ]
      };
    }
  },
  methods: {
    manageridChange(e) {
      const { id , label } = e
      this.ruleForm.manager = label
      this.ruleForm.managerid = id ? [id] : []
      this.$refs.formRef.validateField("managerid")
    },
    async platform_idsearchChange(e) {
      const { id, label } = e;
      this.ruleForm.platform_id = id || "";
      this.ruleForm.platform_name = label || "";
      this.$refs.formRef.validateField("platform_id");
    },
    async customerChange(e) {
      const { code } = e;
      this.ruleForm.companyCode = code ? [code] : [];
      this.ruleForm.companyName = e.label;
      this.$refs.formRef.validateField("companyCode");
    },
    async onSubmit() {
      try {
        await this.$refs.formRef.validate();
        this.loading = true;
        const { code, message } = await asyncRequest.status({
          id: this.sitem.id,
          ...this.ruleForm,
          managerid:Array.isArray(this.ruleForm.managerid) ? this.ruleForm.managerid[0] : this.ruleForm.managerid,
          companyCode: Array.isArray(this.ruleForm.companyCode)
            ? this.ruleForm.companyCode[0]
            : ""
        });
        this.loading = false;
        if (code === 0) {
          this.$emit("refresh");
        } else if (code === 1004) {
          this.$message.warning(message);
        }
      } catch (e) {
        console.log(e);
      }
    }
  }
};
</script>
