<template>

  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <j-form-container :disabled="formDisabled">
        <a-form-model  ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col :span="24">
              <a-divider content-position="left">客户基本情况内容填写</a-divider>
            </a-col>

            <a-col :span="12">
              <a-form-model-item label="客户编号" prop="customerNo" v-bind="labelCol2">
                <a-input v-model="model.customerNo" placeholder="请输入客户编号"  ></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item label="用户编号" prop="userNo" v-bind="labelCol2">
                <a-input v-model="model.userNo" placeholder="请输入用户编号"  ></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item label="客户名称" prop="customerName" v-bind="labelCol2">
                <a-input v-model="model.customerName" placeholder="请输入客户名称"  ></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item label="服务号码" prop="smsNumber" v-bind="labelCol2">
                <a-input v-model="model.smsNumber" placeholder="请输入服务号码"  ></a-input>
              </a-form-model-item>
            </a-col>


            <a-col :span="12">
              <a-form-model-item label="入网时间" prop="networkAccessTime" v-bind="labelCol2">
                <j-date placeholder="请选择入网时间"  v-model="model.networkAccessTime" :show-time="true" date-format="YYYY-MM-DD" style="width: 100%" />
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item label="用户状态" prop="userState" v-bind="labelCol2">
                <a-input v-model="model.userState" placeholder="请输入用户状态"  ></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="24">
              <a-form-model-item label="二级部门" prop="staffDeptLevel2" v-bind="labelCol1">
                <a-input v-model="model.staffDeptLevel2" placeholder="请输入用户发展二级部门"  ></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="24">
              <a-form-model-item label="三级部门" prop="staffDeptLevel3" v-bind="labelCol1">
                <a-input v-model="model.staffDeptLevel3" placeholder="请输入用户发展三级部门"  ></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="24">
              <a-divider content-position="left">业务基本情况内容填写</a-divider>
            </a-col>



            <a-col :span="12">
              <a-form-model-item label="开通状态" prop="userOpenState" v-bind="labelCol2">
                <a-select v-model="userOpenStateModel" placeholder="请选择" :options="userOpenState"/>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item label="码号" prop="smsNumberPrefix" v-bind="labelCol2">
                <a-input v-model="model.smsNumberPrefix" placeholder="接入开通码号"  ></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item label="客户经理" prop="accountManager" v-bind="labelCol2">
                <a-input v-model="model.accountManager"  placeholder="请输入客户经理"  ></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item class="model-item-650" label="客户经理手机号" prop="accountManagerPhone" v-bind="labelCol2">
                <a-input style="width: 67%" v-model="model.accountManagerPhone"  placeholder="请输入客户经理手机号"  ></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item style="width: 900px"  label="码号使用单位联系人" prop="customerContacts" v-bind="labelCol2">
                <a-input style="width: 42%" v-model="model.customerContacts" placeholder="请输入业务合同码号使用单位联系人姓名"  ></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item style="width: 1100px"  label="码号使用单位联系人手机号" prop="customerContactsPhone" v-bind="labelCol2">
                <a-input style="width: 30%"  v-model="model.customerContactsPhone" placeholder="请输入业务合同码号使用单位联系人手机号"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="24">
              <a-form-model-item label="号码用途" prop="smsNumberUsage" v-bind="labelCol1">
                <a-input v-model="model.smsNumberUsage"  type="textarea" maxlength="200" show-word-limit rows="4" placeholder="参考码号接入合同中的用途描述，最大200字。" />
              </a-form-model-item>
            </a-col>


            <a-col :span="24">
              <a-divider content-position="left">业务规范性内容填写</a-divider>
            </a-col>

            <a-col :span="12">
              <a-form-model-item class="model-item-650"  label="合同到期时间" prop="customerContacts" v-bind="labelCol2">
                <j-date   v-model="model.customerContacts" placeholder="请选择合同到期时间"  :show-time="true" date-format="YYYY-MM-DD" style="width: 67%" />
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item style="width: 750px"  label="码号证书到期时间" prop="smsNumberCertificateExpireTime" v-bind="labelCol2">
                <j-date  v-model="model.smsNumberCertificateExpireTime" placeholder="请选择码号证书到期时间"  :show-time="true" date-format="YYYY-MM-DD" style="width: 55%" />
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item style="width: 730px" label="备案通知到期时间" prop="recordNoticeExpireTime" v-bind="labelCol2">
                <j-date v-model="model.recordNoticeExpireTime" placeholder="请选择码备案通知到期时间"  :show-time="true" date-format="YYYY-MM-DD" style="width: 57%" />
              </a-form-model-item>
            </a-col>


            <a-col :span="12">
              <a-form-model-item style="width: 1000px" label="增值业务许可证到期时间" prop="valueAddedLicenceExpireTime" v-bind="labelCol2">
                <j-date v-model="model.valueAddedLicenceExpireTime"  placeholder="请选择增值业务许可证到期时间"  :show-time="true" date-format="YYYY-MM-DD" style="width: 36%" />
              </a-form-model-item>
            </a-col>

            <a-col :span="24">
              <a-form-model-item style="width: 1500px" label="营业执照到期时间" prop="businessLicenceExpireTime" v-bind="labelCol1">
                <j-date v-model="model.businessLicenceExpireTime" placeholder="请选择营业执照到期时间"  :show-time="true" date-format="YYYY-MM-DD" style="width: 60%" />
              </a-form-model-item>
            </a-col>

            <a-col :span="24">
              <a-form-model-item style="width: 3000px"  label="合同签署主体与实际开通客户是否一致" prop="userOpenState" v-bind="labelCol1">
                <a-select style="width: 25.2%" v-model="contractOpenCustomerSameModel" placeholder="请选择" :options="contractOpenCustomerSameState"/>
              </a-form-model-item>
            </a-col>

            <a-col :span="24">
              <a-form-model-item  style="width: 3000px"  label="是否有集团价格审批" prop="groupPriceApproval" v-bind="labelCol1">
                <a-select style="width: 25.2%"  v-model="groupPriceApprovalModel" placeholder="请选择" :options="groupPriceApprovalState"/>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item style="width: 1300px"  label="资料是否完整" prop="dataComplete" v-bind="labelCol1">
                <a-select style="width: 29%" v-model="dataCompleteModel" placeholder="请选择" :options="dataCompleteState"/>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item style="width: 1300px"  label="是否完成整改" prop="rectifyReformOver" v-bind="labelCol1">
                <a-select style="width: 29%" v-model="rectifyReformOverModel" placeholder="请选择" :options="rectifyReformOverState"/>
              </a-form-model-item>
            </a-col>


          </a-row>
        </a-form-model>
      </j-form-container>
    </a-spin>

  </j-modal>

</template>

<script>

import { httpAction } from '@api/manage'

export default {
  name: 'TaskAdd',
  data () {
    return {
      description: '添加页面',
      title: '',
      width: 1000,
      visible: false,
      disableSubmit: false,
      model:{
      },
      // 1列
      labelCol1 : {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 2 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 21 },
        }
      },
      // 2列
      labelCol2 : {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 },
        }
      },
      confirmLoading: false,
      validatorRules: {
        customerNo: [
          { required: true, message: '请输入客户编号!'},
        ],
        userNo: [
          { required: true, message: '请输入用户编号!'},
        ],
        customerName: [
          { required: true, message: '请输入客户名称!'},
        ],
        networkAccessTime: [
          { required: true, message: '请输入服务号码!'},
        ],
        userState: [
          { required: true, message: '请输入用户状态!'},
        ],
        staffDeptLevel2: [
          { required: true, message: '请输入用户发展二级部门!'},
        ],
        staffDeptLevel3: [
          { required: true, message: '请输入用户发展三级部门!'},
        ],
        customerContacts:[],
        smsNumberCertificateExpireTime:[],
        recordNoticeExpireTime:[],
        valueAddedLicenceExpireTime:[],
        businessLicenceExpireTime:[]
      },
      url: {
        add: "/smsCheck/customerInfo/staff/add",
        edit: "/smsCheck/customerInfo/edit",
        queryById: "/smsCheck/task/queryById"
      },
      userOpenStateModel: '开通',
      contractOpenCustomerSameModel:'是',
      groupPriceApprovalModel:'是',
      dataCompleteModel:'否',
      rectifyReformOverModel:"无"
    }
  },
  computed: {
    formDisabled(){
      return this.disabled
    },
    userOpenState() {
      return [
        {
          value: '开通',
          label: '开通'
        },
        {
          value: '拆机',
          label: '拆机'
        }
      ]
    },
    contractOpenCustomerSameState(){

      return[
        {
          value: '是',
          label: '是'
        },

        {
          value: '否',
          label: '否'
        }

      ]
    },

    groupPriceApprovalState(){
      return[
        {
          value: '是',
          label: '是'
        },
        {
          value: '否',
          label: '否'
        }

      ]
    },
    dataCompleteState(){
      return[
        {
          value: '否',
          label: '否'
        },
        {
          value: '是',
          label: '是'
        },
      ]
    },
    rectifyReformOverState(){
      return[
        {
          value: '',
          label: '无'
        },
        {
          value: '是',
          label: '是'
        },
        {
          value: '否',
          label: '否'
        }
      ]
    }
  },
  created () {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
    console.log(this.modelDefault)
  },
  methods: {
    handleOk () {
      this.submitForm();
    },
    handleCancel () {
      this.visible = false;
    },
    add () {
      this.edit(this.modelDefault);
    },
    edit (record) {
      this.model = Object.assign({}, record);
      this.visible = true;
    },
    submitForm () {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate(valid => {
        // 验证通过
        if (valid) {
          that.confirmLoading = true;
          let httpUrl = '';
          let method = '';
          if (!this.model.id) {
            httpUrl += this.url.add;
            method = 'post';
          } else {
            httpUrl += this.url.edit;
            method = 'put';
          }
          // 发送请求
          httpAction(httpUrl, this.model, method)
            .then((res) => {
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
                that.visible = false;
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
        }
      })
    },
  }
}
</script>

<style scoped>
.model-item-650 {
  width: 650px;
}

.model-item-750 {
  width: 750px;
}

</style>