<template>
  <div class="app-container">

    <van-nav-bar left-arrow fixed placeholder @click-left="goBack" >
      <template #title>
        <div class="tb_main">
<!--          B村<p><span class="tb">签字完成</span><span class="tb">异常挂起</span></p>-->
          {{ titleName }}
        </div>
      </template>
    </van-nav-bar>

    <!-- <div class="tap_block">
      <p @click="$router.push({path:'/contracted/village/contractorDetail'})">承包方</p>
      <p class="active">家庭成员</p>
      <p @click="$router.push({path:'/contracted/village/contractorWord'})">承包合同</p>
      <p @click="$router.push({path:'/contracted/village/contractorLand'})">承包地</p>
    </div> -->

    <div class="list_main">
      <van-form ref="formData">
        <van-field v-model="form.cyxm" label="姓名：" placeholder="请输入姓名" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />
        <van-field label="性别：" required :border="false" input-align="right" >
          <template #input>
            <van-radio-group v-model="form.cyxb" direction="horizontal">
              <van-radio v-for="item in cyxbOptions" :key="item.dictValue" :name="item.dictValue">{{ item.dictLabel }}</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="familyStatusText"
          label="与户主关系："
          placeholder="请选择与户主关系"
          required
          :rules="[{ required: true }]"
          :border="false"
          input-align="right"
          right-icon="arrow-down"
          readonly
          clickable
          @click="showFamilyStatus = true"
        />
        <van-popup v-model="showFamilyStatus" position="bottom">
          <van-picker
            show-toolbar
            :columns="familyStatusOptions"
            value-key="dictLabel"
            @confirm="onConfirmFamilyStatusOptions"
            @cancel="showFamilyStatus = false"
          />
        </van-popup>
        <van-field label="是否共有人：" required :border="false" input-align="right" >
          <template #input>
            <van-radio-group v-model="form.sfgyr" direction="horizontal">
              <van-radio v-for="item in sfgyrOptions" :key="item.dictValue" :name="item.dictValue">{{ item.dictLabel }}</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="cyzjlxText"
          label="证件类型："
          placeholder="请选择证件类型"
          required
          :rules="[{ required: true }]"
          :border="false"
          input-align="right"
          right-icon="arrow-down"
          readonly
          clickable
          @click="showCredentialType = true"
        />
        <van-popup v-model="showCredentialType" position="bottom">
          <van-picker
            show-toolbar
            :columns="cyzjlxOptions"
            value-key="dictLabel"
            @confirm="onConfirmCredentialTypeOptions"
            @cancel="showCredentialType = false"
          />
        </van-popup>
        <van-field v-model="form.cyzjhm" label="证件号码：" placeholder="请输入证件号码" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="20" />
        <van-field
          v-model="cybzText"
          label="成员备注："
          placeholder="请选择成员备注"
          :border="false"
          input-align="right"
          right-icon="arrow-down"
          readonly
          clickable
          @click="showMemberRemark = true"
        />
        <van-popup v-model="showMemberRemark" position="bottom">
          <van-picker
            show-toolbar
            :columns="cybzOptions"
            value-key="dictLabel"
            @confirm="onConfirmMemberRemarkOptions"
            @cancel="showMemberRemark = false"
          />
        </van-popup>
        <van-field v-model="form.cybzsm" label="备注说明：" placeholder="请输入备注说明" type="textarea" rows="3" :border="false" input-align="right" maxlength="250" />
        <!-- <van-field v-model="form.cycgfs" label="持股份数：" type="number" placeholder="请输入持股份数" :border="false" input-align="right" />
        <van-field v-model="form.gqzbh" label="股权编号：" placeholder="请输入股权编号" :border="false" input-align="right" /> -->
      </van-form>
      <p class="btn" @click="submitForm" v-if="taskStatus === '2' && $route.params.surveyStatus !== '3'">保存</p>
    </div>


  </div>
</template>
<script>
  import Cookies from "js-cookie";
  import { getJtcy, addJtcy, updateJtcy } from "@/api/contracted/cbfjtcy";

  export default {
    name: "contractedVillageContractor",
    data() {
      return {
        titleName: '',                  // 顶部标题名
        form: {},                       // 承包方家庭成员表单信息
        cyxbOptions: [],                // 成员性别字典
        cyzjlxOptions: [],              // 成员证件类型字典
        cyzjlxText: null,               // 成员证件类型标签名
        showCredentialType: false,      // 控制证件类型字典弹出层的显示和隐藏
        cybzOptions: [],                // 成员备注字典
        cybzText: null,                 // 成员备注标签名
        showMemberRemark: false,        // 控制成员备注字典弹出层的显示和隐藏
        sfgyrOptions: [],               // 是否共有人字典
        familyStatusOptions: [],        // 家庭身份字典
        familyStatusText: null,         // 家庭身份标签名
        showFamilyStatus: false,        // 控制家庭身份字典弹出层的显示和隐藏
        taskStatus: null,               // 调查任务的完成状态：1表示已完成，2表示未完成
      };
    },
    created() {
      this.taskStatus = Cookies.get('taskStatus');
      this.getDicts("sys_user_sex").then(response => {
        this.cyxbOptions = response.data;
      });
      this.getDicts("cert_type").then(response => {
        this.cyzjlxOptions = response.data;
      });
      this.getDicts("cybz").then(response => {
        this.cybzOptions = response.data;
      });
      this.getDicts("is_common").then(response => {
        this.sfgyrOptions = response.data;
      });
      this.getDicts("family_status").then(response => {
        this.familyStatusOptions = response.data;
      });
    },
    mounted() {
      if (this.$route.params.id) {
        this.titleName = "修改家庭成员信息";
        setTimeout(() => {
          this.getDetail();
        }, 500);
      } else {
        this.titleName = "新增家庭成员信息";
        this.resetForm();
      }
    },
    methods: {
      getDetail(){
        getJtcy(this.$route.params.id).then(response => {
          this.form = response.data;
          this.familyStatusText = this.selectDictLabel(this.familyStatusOptions, response.data.yhzgx);
          this.cyzjlxText = this.selectDictLabel(this.cyzjlxOptions, response.data.cyzjlx);
          this.cybzText = this.selectDictLabel(this.cybzOptions, response.data.cybz);
        });
      },
      onConfirmFamilyStatusOptions(value){
        this.form.yhzgx = value.dictValue;
        this.familyStatusText = value.dictLabel;
        this.showFamilyStatus = false;
      },
      onConfirmCredentialTypeOptions(value){
        this.form.cyzjlx = value.dictValue;
        this.cyzjlxText = value.dictLabel;
        this.showCredentialType = false;
      },
      onConfirmMemberRemarkOptions(value){
        this.form.cybz = value.dictValue;
        this.cybzText = value.dictLabel;
        this.showMemberRemark = false;
      },
      goBack() {
        this.$router.push({
          name: 'contractedVillageContractorFamily',
          params: {
            deptId: this.$route.params.deptId,
            cbfbm: this.$route.params.cbfbm,
            cbfmc: this.$route.params.cbfmc,
            surveyStatus: this.$route.params.surveyStatus
          }
        });
      },
      submitForm() {
        this.$refs.formData.validate().then(() => {
          if (this.$route.params.id) {
            updateJtcy(this.form).then(response => {
              if (response.code == 200) {
                this.$toast({
                  icon: 'success',
                  message: '保存成功',
                  duration:"1000",
                  onClose: () => {
                    if (this.form.yhzgx === '02') {
                      this.$route.params.cbfmc = this.form.cyxm;
                    }
                    this.goBack();
                  }
                });
              }
            });
          } else {
            this.form.deptId = this.$route.params.deptId;
            this.form.cbfbm = this.$route.params.cbfbm;
            addJtcy(this.form).then(response => {
              if (response.code == 200) {
                this.$toast({
                  icon: 'success',
                  message: '保存成功',
                  duration:"1000",
                  onClose: () => {
                    if (this.form.yhzgx === '02') {
                      this.$route.params.cbfmc = this.form.cyxm;
                    }
                    this.goBack();
                  }
                });
              }
            });
          }
        }).catch(() => {
          this.$notify({ type: 'danger', message: '请填写完整的表单项' });
        });
      },
      resetForm() {
        this.form = {
          deptId: null,
          cbfbm: null,
          cyxm: null,
          cyxb: '1',
          yhzgx: null,
          sfgyr: '1',
          cyzjlx: '1',
          cyzjhm: null,
          cybz: null,
          cybzsm: null,
          cycgfs: null,
          gqzbh: null
        };
        this.cyzjlxText = '居民身份证';
      }
    },
  };
</script>
<style scoped lang="scss">

  .app-container{
    background: #fff url("../../../../../static/images/contracted/contracted_index_bg.png") no-repeat center;
    background-size: 100% 100%;
    height: 100vh;
    padding: 0 4vw;
    overflow: hidden;
  }

  /deep/ .van-nav-bar{
    background: transparent;
  }

  /deep/ .van-nav-bar .van-icon{
    color: #000000;
  }

  /deep/ .van-hairline--bottom::after{
    border: none;
  }

  /deep/ .van-search__content{
    background: rgba(255,255,255,.5);
  }
  /deep/ .van-search{
    padding: 0;
    flex: 1;
  }

  /deep/ .van-ellipsis{
    overflow: initial;
  }

  .tb_main{
    position: relative;
    p{
      position: absolute;
      display: inline-block;
      margin-left: 10PX;
    }
  }

  .tb{
    font-size: 12px;
    color: #ff8900;
    background: #daf6e7;
    border: 1px solid #d7be6e;
    padding: 2PX 8PX;
    border-radius: 50PX;
    margin-right: 5PX;
  }

  .tap_block{
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: #ebfaf2;
    padding: 2PX 4PX;
    border-radius: 10PX;
    margin-top: 1vh;
    .active{
      background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
      box-shadow: 0 0 10PX #cccccc;
      color: #333333;
    }
    p{
      width: 25%;
      text-align: center;
      padding: 5PX 0;
      border-radius: 10PX;
      color: #666666;
    }
  }

  .search_main{
    display: flex;
    margin-top: 2vh;
    .search_btn{
      background: rgba(255,255,255,.5);
      width: 25%;
      border-radius: 50PX;
      margin-left: 10PX;
      padding: 2PX;
      .active{
        background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
        color: #333333;
        border-radius: 50PX;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }
    }
  }

  .second_tap{
    display: flex;
    align-items: center;
    margin-top: 1vh;
    p{
      background: #dbf1ea;
      border: 1px solid #cdcdcd;
      color: #5f5f5f;
      padding: 5PX 15PX;
      margin-right: 3vw;
      border-radius: 50PX;
    }
    .active{
      background: #99eecb;
      border-color: #48e5a2;
      color: #333333;
    }
  }

  .list_main{
    margin-top: 2vh;
    overflow-y: scroll;
    text-align: center;
    background: #ffffff;
    border-top-left-radius: 10PX;
    border-top-right-radius: 10PX;
    height: 88vh;
    .btn{
      background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
      box-shadow: 0 0 10PX #cccccc;
      padding: 10PX 0PX;
      border-radius: 50PX;
      display: inline-block;
      width: 40%;
      margin-top: 2vh;
    }
  }

</style>
