<template>
  <div>
    <van-nav-bar
      @click-left="onClickLeft"
      @click-right="onClickRight"
      style="background-color: #1989fa"
    >
      <template #title>
        <van-col style="color: #ffffff">编辑客户信息</van-col>
      </template>
      <template #left>
        <i
          class="fa fa-arrow-circle-left"
          aria-hidden="true"
          style="color: #ffffff; font-size: 18px"
        ></i>
      </template>
    </van-nav-bar>

    <van-form>
      <van-field
        v-model="name"
        name="姓名"
        label="姓名"
        placeholder="请输入"
        input-align="right"
      />
      <van-field
        v-model="phone"
        name="手机"
        label="手机"
        placeholder="请输入"
        input-align="right"
      ></van-field>
      <van-cell
        title="性别"
        :value="sexName"
        is-link
        title-class="title1"
        value-class="value1"
        @click="showSex = true"
      ></van-cell>
      <van-popup v-model="showSex" round position="bottom">
        <van-picker
          show-toolbar
          title="请选择"
          :columns="sexData"
          @cancel="showSex = false"
          @confirm="onConfirmSex"
          :default-index="sexIndex"
        />
      </van-popup>
      <van-cell
        title="国籍"
        :value="nationality"
        is-link
        title-class="title1"
        value-class="value1"
        @click="showNationality = true"
      ></van-cell>
      <van-popup v-model="showNationality" round position="bottom">
        <van-picker
          show-toolbar
          title="请选择"
          :columns="nationalityData"
          @cancel="showNationality = false"
          @confirm="onConfirmNationality"
          :default-index="nationalityIndex"
        />
      </van-popup>
      <van-cell
        title="证件类型"
        :value="credentialsType"
        is-link
        title-class="title1"
        value-class="value1"
        @click="showCredentialsType = true"
      ></van-cell>
      <van-popup v-model="showCredentialsType" round position="bottom">
        <van-picker
          show-toolbar
          title="请选择"
          :columns="credentialsTypeData"
          @cancel="showCredentialsType = false"
          @confirm="onConfirmCredentialsType"
          :default-index="credentialsTypeIndex"
        />
      </van-popup>
      <van-field
        v-model="credentialsId"
        name="证件号"
        label="证件号"
        placeholder="请输入"
        input-align="right"
      />
      <van-cell
        title="出生日期"
        :value="birth"
        is-link
        title-class="title1"
        value-class="value1"
        @click="showBirth = true"
      ></van-cell>
      <van-popup v-model="showBirth" round position="bottom">
        <van-datetime-picker
          v-model="birthSel"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="showBirth = false"
          @confirm="onConfirmBirth"
        />
      </van-popup>
      <van-cell
        title="婚姻状况"
        :value="marry"
        is-link
        title-class="title1"
        value-class="value1"
        @click="showMarry = true"
      ></van-cell>
      <van-popup v-model="showMarry" round position="bottom">
        <van-picker
          show-toolbar
          title="请选择"
          :columns="marryData"
          @cancel="showMarry = false"
          @confirm="onConfirmMarry"
          :default-index="marryIndex"
        />
      </van-popup>
      <van-field
        v-model="household"
        name="户籍"
        label="户籍"
        placeholder="请输入"
        input-align="right"
      />
      <van-field
        v-model="address"
        rows="1"
        autosize
        label="联系地址"
        type="textarea"
        placeholder="请输入"
        input-align="right"
      />
      <van-field
        v-model="post"
        name="邮编"
        label="邮编"
        placeholder="请输入"
        input-align="right"
      />
      <van-field
        v-model="fax"
        name="传真"
        label="传真"
        placeholder="请输入"
        input-align="right"
      />
      <van-field
        v-model="email"
        name="电子邮箱"
        label="电子邮箱"
        placeholder="请输入"
        input-align="right"
      />
      <van-cell
        title="认知途径"
        :value="cognizeWay"
        is-link
        title-class="title1"
        value-class="value1"
        @click="showCognizeWay = true"
      ></van-cell>
      <van-popup v-model="showCognizeWay" round position="bottom">
        <van-picker
          show-toolbar
          title="请选择"
          :columns="cognizeWayData"
          @cancel="showCognizeWay = false"
          @confirm="onConfirmCognizeWay"
          :default-index="cognizeWayIndex"
        />
      </van-popup>
      <van-field
        v-model="remark"
        rows="1"
        autosize
        label="备注"
        type="textarea"
        placeholder="请输入"
        class="remarkBottom"
        input-align="right"
      />

      <van-row class="bottom">
        <van-col span="12" class="bgGrey" @click="cancel">
          <van-icon name="close" />取消
        </van-col>
        <van-col span="12" class="bgRed" @click="save"
          ><van-icon name="passed" />保存
        </van-col>
      </van-row>
    </van-form>
  </div>
</template>

<script>
import {
  GetSaClientInfo,
  ModifySaClient,
  GetNationalityList,
  GetCredentialsTypeList,
  GetCognizeWayList
} from '@/common/api/loginApi.js'
import Decimal from 'decimal.js'
import '../assets/css/resetvant.css'
export default {
  name: 'login',
  data () {
    return {
      id: '',
      name: '',
      phone: '',
      sex: 0,
      sexName: '',
      showSex: false,
      sexData: [
        { id: 0, text: '男' },
        { id: 1, text: '女' }
      ],
      sexIndex: 0,
      nationality: '',
      showNationality: false,
      nationalityData: [],
      nationalityIndex: 0,
      credentialsType: '',
      showCredentialsType: false,
      credentialsTypeData: [],
      credentialsTypeIndex: 0,
      credentialsId: '',
      birth: '',
      birthSel: '',
      showBirth: false,
      marry: '',
      showMarry: false,
      marryData: ['已婚', '未婚', '未知'],
      marryIndex: 0,
      household: '',
      address: '',
      post: '',
      fax: '',
      email: '',
      remark: '',
      cognizeWay: '',
      showCognizeWay: false,
      cognizeWayData: [],
      cognizeWayIndex: 0,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2025, 10, 1),
      phoneList: []
    }
  },
  created: function () {
    console.info('created')
    // console.info(this.$util);
    this.$util.persistLogin(this)
    this.id = this.$route.query.id
    this.name = this.$route.query.name
    // 顺序加载数据
    this.GetNationalityList()
  },
  computed: {
    // 计算属性
    // eslint-disable-next-line vue/return-in-computed-property
    completion: function () {}
  },
  methods: {
    // 获取客户信息
    GetSaClientInfo: function () {
      var that = this
      var data = {
        userCode: that.$store.state.data.userCode,
        projectId: that.$store.state.projectId,
        clientId: that.id
      }
      console.info('GetSaClientInfo data', data)
      GetSaClientInfo(data).then((res) => {
        console.info('GetSaClientInfo', res)
        if (!res.result) {
          that.$toast(res.msg)
          return
        }
        that.phone = res.data.Phone
        that.sex = res.data.Sex
        // eslint-disable-next-line eqeqeq
        if (that.sex == 0) {
          that.sexName = '男'
        } else {
          that.sexName = '女'
        }
        that.remark = res.data.Remark
        that.credentialsType = res.data.CredentialsType
        that.credentialsId = res.data.CredentialsId
        that.nationality = res.data.Nationality
        that.birth = res.data.Birth
        var arr = res.data.Birth.split('-')
        console.info('arr', arr)
        that.birthSel = new Date(arr[0], Decimal(arr[1]).sub(1), arr[2])
        console.info('birthSel', that.birthSel)
        that.marry = res.data.Marry
        that.household = res.data.Household
        that.post = res.data.Post
        that.fax = res.data.Fax
        that.email = res.data.Email
        that.address = res.data.Address
        that.cognizeWay = res.data.CognizeWay
        res.data.PhoneNumbers.forEach(function (item, index, arr) {
          that.phoneList.push(item)
        })
        // 性别赋初始值
        that.sexData.forEach(function (item, index, arr) {
          // eslint-disable-next-line eqeqeq
          if (item.id == that.sex) {
            that.sexIndex = index
          }
        })
        // 国籍赋初始值
        that.nationalityData.forEach(function (value, index, arr) {
          // eslint-disable-next-line eqeqeq
          if (value == that.nationality) {
            that.nationalityIndex = index
          }
        })
        // 证件类型赋初始值
        that.credentialsTypeData.forEach(function (value, index, arr) {
          // eslint-disable-next-line eqeqeq
          if (value == that.credentialsType) {
            that.credentialsTypeIndex = index
          }
        })
        // 婚姻状况赋初始值
        that.marryData.forEach(function (value, index, arr) {
          // eslint-disable-next-line eqeqeq
          if (value == that.marry) {
            that.marryIndex = index
          }
        })
        // 认知途径赋初始值
        that.cognizeWayData.forEach(function (value, index, arr) {
          // eslint-disable-next-line eqeqeq
          if (value == that.cognizeWay) {
            that.cognizeWayIndex = index
          }
        })
      })
    },
    GetNationalityList: function () {
      // 获取国籍
      var that = this
      var data = {
        projectId: that.$store.state.projectId
      }
      console.info('GetNationalityList data', data)
      GetNationalityList(data).then((res) => {
        console.info('GetNationalityList', res)
        if (!res.result) {
          that.$toast(res.msg)
          return
        }
        res.data.forEach(function (item, index, array) {
          that.nationalityData.push(item.name)
        })
        that.GetCredentialsTypeList()
      })
    },
    GetCredentialsTypeList: function () {
      // 获取证件类型
      var that = this
      var data = {
        projectId: that.$store.state.projectId
      }
      console.info('GetCredentialsTypeList data', data)
      GetCredentialsTypeList(data).then((res) => {
        console.info('GetCredentialsTypeList', res)
        if (!res.result) {
          that.$toast(res.msg)
          return
        }
        res.data.forEach(function (item, index, array) {
          that.credentialsTypeData.push(item.name)
        })
        that.GetCognizeWayList()
      })
    },
    GetCognizeWayList: function () {
      // 获取认知途径
      var that = this
      var data = {
        projectId: that.$store.state.projectId,
        clientId: that.id
      }
      console.info('GetCognizeWayList data', data)
      GetCognizeWayList(data).then((res) => {
        console.info('GetCognizeWayList', res)
        if (!res.result) {
          that.$toast(res.msg)
          return
        }
        res.data.forEach(function (item, index, array) {
          that.cognizeWayData.push(item.name)
        })
        that.GetSaClientInfo()
      })
    },
    onConfirmSex: function (item, index) {
      console.info('onConfirmSex', item)
      this.sex = item.id
      this.sexName = item.text
      this.showSex = false
    },
    onConfirmNationality: function (value, index) {
      // 国籍
      console.info('onConfirmNationality', value)
      this.nationality = value
      this.showNationality = false
    },
    onConfirmCredentialsType: function (value, index) {
      // 证件类型
      console.info('onConfirmCredentialsType', value)
      this.credentialsType = value
      this.showCredentialsType = false
    },
    onConfirmBirth: function (value, index) {
      // 出生日期
      console.info('onConfirmBirth', value)
      this.birth = this.$util.getDate(value)
      this.showBirth = false
    },
    onConfirmMarry: function (value, index) {
      // 婚姻状况
      console.info('onConfirmMarry', value)
      this.marry = value
      this.showMarry = false
    },
    onConfirmCognizeWay: function (value, index) {
      // 认知途径
      console.info('onConfirmCognizeWay', value)
      this.cognizeWay = value
      this.showCognizeWay = false
    },
    cancel: function () {
      this.$router.go(-1)
    },
    save: function () {
      let that = this
      let jsonData = {
        name: that.name,
        phone: that.phone,
        sex: that.sex,
        remark: that.remark,
        credentialsType: that.credentialsType,
        credentialsId: that.credentialsId,
        nationality: that.nationality,
        birth: that.birth,
        marry: that.marry,
        household: that.household,
        post: that.post,
        fax: that.fax,
        email: that.email,
        address: that.address,
        cognizeWay: that.cognizeWay,
        phoneList: that.phoneList
      }
      // console.info("save jsonData", JSON.stringify(jsonData));
      let data = {
        userCode: that.$store.state.data.userCode,
        projectId: that.$store.state.projectId,
        clientId: that.id,
        jsonData: JSON.stringify(jsonData)
      }
      console.info('save', data)
      // return;
      ModifySaClient(data).then((res) => {
        console.info('ModifySaClient', res)
        if (res.result) {
          if (res.msg == null) {
            that.$router.go(-1)
          } else {
            that.$dialog
              .alert({
                message: res.msg
              })
              .then(() => {
                // on close
                if (res.result) {
                  that.$router.go(-1)
                }
              })
          }
        } else {
          that.$dialog.alert({
            message: res.msg
          })
        }
      })
    },
    onClickLeft () {
      // this.$toast('返回')
      console.info('left')
      this.$router.go(-1)
    },
    onClickRight () {
      this.$router.go(0)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
.title1 {
  color: #aaa;
  font-size: 15px;

  text-align: left;
  height: 30px;
}
.title2 {
  color: #ff0000;
  text-align: left;
  font-size: 13px;
}
.infoTitle {
  color: #aaa;
  text-align: left;
}
.value1 {
  color: #000;
  font-size: 13px;
}
.infoValue {
  color: #0606af;
}
.size {
  font-size: 16px;
}
.header {
  margin-top: 10px;
  height: 70px;
  border-bottom: #cfcfcf solid 3px;
}
.titleClass {
  border-bottom: #000 solid 1px;
}
.van-tab {
  color: #ff0000;
}
.redColor {
  color: #ff0000;
}
.bgBlue {
  background: #a0a0f7;
  height: 30px;
  margin-top: 5px;
  padding-top: 5px;
}
.bgBill {
  height: 30px;
  border-bottom: #aaa solid 1px;
  padding-top: 5px;
}
.bottom {
  /* left:0; */
  bottom: 0px;
  position: fixed;
  width: 100%;
}
.bgGrey {
  background: #999999;
  height: 35px;
  justify-content: center;
  padding-top: 5px;
}
.bgRed {
  background: #ff0000;
  height: 35px;
  justify-content: center;
  color: #ffffff;
  font-weight: 900;
  padding-top: 5px;
}
.remarkBottom {
  margin-bottom: 40px;
}
</style>
