<template>
  <div>
    <a-page-header
      style="background-color: #FFFFFF;"
      title="资料完善"
      sub-title=""
      @back="goBack"
    >
      <a-descriptions :title="model.customerName" :column="3" :bordered="false">
        <a-descriptions-item label="客户编号">{{model.customerNo}}</a-descriptions-item>
        <a-descriptions-item label="用户编号">{{model.userNo}}</a-descriptions-item>
        <a-descriptions-item label="用户状态">{{model.userState}}</a-descriptions-item>
        <a-descriptions-item label="服务号码">{{model.smsNumber}}</a-descriptions-item>
        <a-descriptions-item label="入网时间" :span="2">{{model.networkAccessTime}}</a-descriptions-item>
        <a-descriptions-item label="二级部门">{{model.staffDeptLevel2}}</a-descriptions-item>
        <a-descriptions-item label="三级部门">{{model.staffDeptLevel3}}</a-descriptions-item>
      </a-descriptions>
    </a-page-header>

    <a-card :bordered="false" style="margin-top: 10px;">
      <a-form-model
        ref="form"
        :model="model"
        :rules="validatorRules"
        :label-col="{ span: 2 , pull: 1}"
        :wrapper-col="{ span: 22 , pull: 1}"
      >
<!--        <a-card title="客户基本情况内容" :bordered="true">-->

<!--          <a-row>-->

<!--            <a-col :span="24">-->
<!--              <a-form-model-item label="客户名称" prop="customerName" v-bind="labelCol1">-->
<!--                <a-input v-model="model.customerName" placeholder="请输入客户名称"></a-input>-->
<!--              </a-form-model-item>-->
<!--            </a-col>-->
<!--            <a-col :span="8">-->
<!--              <a-form-model-item label="客户编号" prop="customerNo" v-bind="labelCol3">-->
<!--                <a-input v-model="model.customerNo" placeholder="请输入客户编号"  ></a-input>-->
<!--              </a-form-model-item>-->
<!--            </a-col>-->

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


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

<!--            <a-col :span="8">-->
<!--              <a-form-model-item label="入网时间" prop="networkAccessTime" v-bind="labelCol3">-->
<!--                <j-date placeholder="请选择入网时间"  v-model="model.networkAccessTime" date-format="YYYY-MM-DD" />-->
<!--              </a-form-model-item>-->
<!--            </a-col>-->

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

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

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

<!--          </a-row>-->

<!--        </a-card>-->

        <a-card title="业务基本情况内容" :bordered="true">
          <a-row>
            <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="userOpenState" v-bind="labelCol2">
                <a-select v-model="model.userOpenState" placeholder="请选择">
                  <a-select-option :value="1">开通</a-select-option>
                  <a-select-option :value="2">拆机</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item prop="accountManager" v-bind="labelCol2">
                <span slot="label">
                  客户经理&nbsp;
                  <a-tooltip title="客户经理姓名">
                    <a-icon type="info-circle" />
                  </a-tooltip>
                </span>
                <a-input v-model="model.accountManager"  placeholder="请输入客户经理"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item prop="accountManagerPhone" v-bind="labelCol2">
                <span slot="label">
                  手机号&nbsp;
                  <a-tooltip title="客户经理手机号">
                    <a-icon type="info-circle" />
                  </a-tooltip>
                </span>
                <a-input v-model="model.accountManagerPhone" placeholder="请输入客户经理手机号"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item prop="customerContacts" v-bind="labelCol2">
                <span slot="label">
                  联系人&nbsp;
                  <a-tooltip title="码号使用单位联系人姓名">
                    <a-icon type="info-circle" />
                  </a-tooltip>
                </span>
                <a-input v-model="model.customerContacts" placeholder="请输入码号使用单位联系人"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item prop="customerContactsPhone" v-bind="labelCol2">
                <span slot="label">
                  手机号&nbsp;
                  <a-tooltip title="联系人手机号">
                    <a-icon type="info-circle" />
                  </a-tooltip>
                </span>
                <a-input 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-row>
          <span></span>
        </a-card>


        <a-card title="业务规范性内容" :bordered="true">
          <a-row>
            <a-col :span="24" style="margin-bottom: 12px;">
              <a-alert message="温馨提示" description="以下中的合同、码号证书、备案通知、增值业务许可、营业执照等均为到期时间" type="info" show-icon/>
            </a-col>
            <a-col :span="8">
              <a-form-model-item prop="contractExpireTime" v-bind="labelCol3">
                <span slot="label">
                  合同
                  <a-tooltip title="合同到期时间">
                    <a-icon type="info-circle" />
                  </a-tooltip>
                </span>
                <j-date v-model="model.contractExpireTime" placeholder="请选择到期时间" date-format="YYYY-MM-DD"/>
              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item prop="smsNumberCertificateExpireTime" v-bind="labelCol3">
                <span slot="label">
                  码号证书
                  <a-tooltip title="码号证书到期时间">
                    <a-icon type="info-circle" />
                  </a-tooltip>
                </span>
                <j-date v-model="model.smsNumberCertificateExpireTime" placeholder="请选择到期时间" date-format="YYYY-MM-DD"/>
              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item prop="recordNoticeExpireTime" v-bind="labelCol3">
                <span slot="label">
                  备案通知
                  <a-tooltip title="备案通知到期时间">
                    <a-icon type="info-circle" />
                  </a-tooltip>
                </span>
                <j-date v-model="model.recordNoticeExpireTime" placeholder="请选择到期时间" date-format="YYYY-MM-DD"/>
              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item prop="valueAddedLicenceExpireTime" v-bind="labelCol3">
                <span slot="label">
                  增值业务许可证
                  <a-tooltip title="增值业务许可证到期时间">
                    <a-icon type="info-circle" />
                  </a-tooltip>
                </span>
                <j-date v-model="model.valueAddedLicenceExpireTime" placeholder="请选择到期时间" date-format="YYYY-MM-DD"/>
              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item prop="businessLicenceExpireTime" v-bind="labelCol3">
                <span slot="label">
                  营业执照
                  <a-tooltip title="营业执照到期时间">
                    <a-icon type="info-circle" />
                  </a-tooltip>
                </span>
                <j-date v-model="model.businessLicenceExpireTime" placeholder="请选择到期时间" date-format="YYYY-MM-DD"/>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item prop="contractOpenCustomerSame" v-bind="labelCol2">
                <span slot="label">
                  是否一致
                  <a-tooltip title="合同签署主体与实际开通客户是否一致">
                    <a-icon type="info-circle" />
                  </a-tooltip>
                </span>
                <a-select v-model="model.contractOpenCustomerSame" placeholder="请选择">
                  <a-select-option :value="1">是</a-select-option>
                  <a-select-option :value="0">否</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item prop="groupPriceApproval" v-bind="labelCol2">
                <span slot="label">
                  是否有审批
                  <a-tooltip title="是否有集团价格审批">
                    <a-icon type="info-circle" />
                  </a-tooltip>
                </span>
                <a-select v-model="model.groupPriceApproval" placeholder="请选择">
                  <a-select-option :value="1">是</a-select-option>
                  <a-select-option :value="0">否</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item label="资料是否完整" prop="dataComplete" v-bind="labelCol2">
                <a-select v-model="model.dataComplete" placeholder="请选择">
                  <a-select-option :value="1">是</a-select-option>
                  <a-select-option :value="0">否</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item label="是否完成整改" prop="rectifyReformOver" v-bind="labelCol2">
                <a-select v-model="model.rectifyReformOver" placeholder="请选择">
                  <a-select-option :value="1">是</a-select-option>
                  <a-select-option :value="0">否</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>

        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }" style="margin-top: 10px;">
          <a-space>
            <a-button type="primary" @click="submit">
              提交
            </a-button>
            <a-button @click="goBack">
              返回
            </a-button>
          </a-space>
        </a-form-model-item>

      </a-form-model>

    </a-card>


  </div>

</template>

<script>

import { httpAction, getAction, putAction } from '@api/manage'

export default {
  name: 'TaskAdd',
  inject:['closeCurrent'],
  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 },
        }
      },
      // 3列
      labelCol3 : {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 },
        }
      },
      confirmLoading: false,
      validatorRules: {
        customerNo: [
          { required: true, message: '请输入客户编号!'},
        ],
        userNo: [
          { required: true, message: '请输入用户编号!'},
        ],
        customerName: [
          { required: true, message: '请输入客户名称!'},
        ],
        smsNumber: [
          { 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",
        queryInfo: "/smsCheck/customerInfo/queryById"
      },
    }
  },
  created () {
    console.log("222222")
    this.model.id = this.$route.query.id;
    this.queryInfoById(this.model.id);
    // 备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));

    console.log(this.model)

  },
  methods: {
    // 返回上一级
    goBack() {
      this.$router.go(-1);
      this.closeCurrent();
    },
    submit () {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate(valid => {
        // 验证通过
        if (valid) {
          let httpUrl = this.url.edit;
          let params = Object.assign({},that.model)

          putAction(httpUrl,params).then((res)=>{
            if(res.success){
              that.$message.success(res.message);
              that.jump2Upload();

            }else{
              that.$message.warning(res.message);
            }
          }).finally(() => {

          })
        }
      })
    },
    queryInfoById (id) {
      let url = this.url.queryInfo;
      let params = {
        id: id
      }
      let that = this;
      getAction(url, params).then(res => {
        if (res.success) {
          that.model = res.result;
        }
      }).finally(() => {

      })
    },
    jump2Upload() {
      let that = this;
      this.$confirm({
        title: '是否跳转?',
        content: '资料完善后，需要上传附件资料，点击确定跳转至上传资料页',
        onOk() {
          that.$router.push({ path: '/sms/check/data/import' ,query:{id:that.model.id}});
          that.closeCurrent();
        },
        onCancel() {
          that.closeCurrent();
        },
      });
    },
  }
}
</script>

<style scoped>

</style>