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

    <!-- <van-nav-bar left-arrow fixed placeholder @click-left="$router.push({path:'/contracted/village/contractor'})" >
      <template #title>
        <div class="tb_main">
          B村<p><span class="tb">签字完成</span><span class="tb">异常挂起</span></p>
        </div>
      </template>
    </van-nav-bar> -->
    <contractor-header :dept-id="$route.params.deptId" :contractor-code="$route.params.cbfbm" :contractor-name="$route.params.cbfmc" :survey-status="$route.params.surveyStatus" :task-status="taskStatus"></contractor-header>

    <div class="tap_block">
      <p @click="skip('contractedVillageContractorDetail')">承包方</p>
      <p @click="skip('contractedVillageContractorFamily')">家庭成员</p>
      <p class="active">承包合同</p>
      <p @click="skip('contractedVillageContractorLand')">承包地</p>
    </div>

    <div class="list_main">
      <van-form ref="formData">
        <van-field v-model="form.cbhtbm" label="承包合同代码：" placeholder="请输入承包合同代码" required :rules="[{ required: true }]" :border="false" input-align="left" label-width="auto" :disabled="isDisabled" maxlength="19">
          <template #button v-if="!isDisabled">
            <van-button size="mini" type="primary" native-type="button" @click="generateCode">生成</van-button>
          </template>
        </van-field>
        <van-field v-model="form.ycbhtbm" label="原承包合同代码：" placeholder="请输入原承包合同代码" :border="false" input-align="left" maxlength="19" />
        <van-field v-model="form.fbfbm" label="发包方代码：" placeholder="请输入发包方代码" required :rules="[{ required: true }]" :border="false" input-align="left" maxlength="14" />
        <van-field
          v-model="cbflxText"
          label="承包方类型："
          placeholder="请选择承包方类型"
          required
          :rules="[{ required: true }]"
          :border="false"
          input-align="left"
          right-icon="arrow-down"
          readonly
          clickable
          @click="showType = true"
        />
        <van-popup v-model="showType" position="bottom">
          <van-picker
            show-toolbar
            :columns="cbflxOptions"
            value-key="dictLabel"
            @confirm="onConfirmTypeOptions"
            @cancel="showType = false"
          />
        </van-popup>
        <van-field v-model="form.cbfbm" label="承包方代码：" placeholder="请输入承包方代码" required :rules="[{ required: true }]" :border="false" input-align="left" :disabled="isDisabled" maxlength="18" />
        <van-field v-model="form.cbfmc" label="承包方名称：" placeholder="请输入承包方名称" required :rules="[{ required: true }]" :border="false" input-align="left" maxlength="50" />
        <van-field
          v-model="cbfsText"
          label="承包方式："
          placeholder="请选择承包方式"
          required
          :rules="[{ required: true }]"
          :border="false"
          input-align="left"
          right-icon="arrow-down"
          readonly
          clickable
          @click="showCbfs = true"
        />
        <van-popup v-model="showCbfs" position="bottom">
          <van-picker
            show-toolbar
            :columns="cbfsOptions"
            value-key="dictLabel"
            @confirm="onConfirmCbfsOptions"
            @cancel="showCbfs = false"
          />
        </van-popup>
        <van-field
          v-model="form.qdsj"
          label="签订时间："
          placeholder="请选择签订时间"
          required
          :rules="[{ required: true }]"
          :border="false"
          input-align="left"
          right-icon="arrow-down"
          readonly
          clickable
          @click="showQDSJ = true"
        />
        <van-popup v-model="showQDSJ" position="bottom">
          <van-datetime-picker
            :value="new Date(form.qdsj)"
            type="date"
            title="请选择签订时间"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirmQdsj"
            @cancel="showQDSJ = false"
          />
        </van-popup>
        <van-field
          v-model="form.cbqxq"
          label="承包起始时间："
          placeholder="请选择起始时间"
          required
          :rules="[{ required: true }]"
          :border="false"
          input-align="left"
          right-icon="arrow-down"
          readonly
          clickable
          @click="showCbqxq = true"
        >
          <template #button v-if="taskStatus === '2' && $route.params.surveyStatus !== '3' && this.form.id">
            <van-button size="mini" type="primary" native-type="button" @click.stop="extension">延期</van-button>
          </template>
        </van-field>
        <van-popup v-model="showCbqxq" position="bottom">
          <van-datetime-picker
            :value="form.cbqxq ? new Date(form.cbqxq) : new Date()"
            type="date"
            title="请选择起始时间"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirmCbqxq"
            @cancel="showCbqxq = false"
          />
        </van-popup>

        <van-field
          v-model="form.cbqxz"
          label="承包结束时间："
          placeholder="请选择结束时间"
          required
          :rules="[{ required: true }]"
          :border="false"
          input-align="left"
          right-icon="arrow-down"
          readonly
          clickable
          @click="showCbqxz = true"
        />
        <van-popup v-model="showCbqxz" position="bottom">
          <van-datetime-picker
            :value="form.cbqxz ? new Date(form.cbqxz) : new Date()"
            type="date"
            title="请选择结束时间"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirmCbqxz"
            @cancel="showCbqxz = false"
          />
        </van-popup>
        <van-field v-model="form.cbdkzs" label="承包地块数：" placeholder="请输入承包地块数" required :rules="[{ required: true }]" :border="false" input-align="left" type="digit" />
        <van-field v-model="form.htzmjm" label="合同面积(亩)：" placeholder="请输入合同面积(亩)" required :rules="[{ required: true }]" :border="false" input-align="left" type="number" />
      </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 contractorHeader from "./contractorHeader";
  import { getCbht, addCbht, updateCbht, extendCbht } from "@/api/contracted/cbht";

  export default {
    name: "contractedVillageContractor",
    components: {
      contractorHeader
    },
    data() {
      return {
        form: {},                 // 承包合同表单信息
        cbfsOptions: [],          // 承包方式字典
        cbfsText: null,           // 承包方式标签名
        showCbfs: false,          // 控制承包方式字典弹出层的显示和隐藏
        cbflxOptions: [],         // 承包方类型字典
        cbflxText: null,          // 承包方类型标签名
        showType: false,          // 控制承包方类型字典弹出层的显示和隐藏
        showQDSJ: false,          // 控制签订时间弹出层的显示和隐藏
        showCbqxq: false,         // 控制承包起始时间弹出层的显示和隐藏
        showCbqxz: false,         // 控制承包结束时间弹出层的显示和隐藏
        minDate: new Date(1978, 0, 1),
        maxDate: new Date(2100, 11, 31),
        isDisabled: false,
        taskStatus: null,         // 调查任务的完成状态：1表示已完成，2表示未完成
      };
    },
    created() {
      this.taskStatus = Cookies.get('taskStatus');
      this.getDicts("jyq_method").then(response => {
        this.cbfsOptions = response.data;
      });
      this.getDicts("cbf_type").then(response => {
        this.cbflxOptions = response.data;
      });
    },
    mounted() {
      setTimeout(() => {
        this.getDetail();
      }, 500);
    },
    methods: {
      getDetail(){
        getCbht(this.$route.params.cbfbm).then(response => {
          this.form = response.data;
          if (this.form) {
            this.cbflxText = this.selectDictLabel(this.cbflxOptions, this.form.cbflx);
            this.cbfsText = this.selectDictLabel(this.cbfsOptions, this.form.cbfs);
            this.isDisabled = true;
          } else {
            this.isDisabled = false;
            this.resetForm();
          }
        });
      },
      onConfirmTypeOptions(value) {
        this.form.cbflx = value.dictValue;
        this.cbflxText = value.dictLabel;
        this.showType = false;
      },
      onConfirmCbfsOptions(value) {
        this.form.cbfs = value.dictValue;
        this.cbfsText = value.dictLabel;
        this.showCbfs = false;
      },
      onConfirmQdsj(data) {
        this.form.qdsj = this.format(data, 'yyyy-MM-dd');
        this.showQDSJ = false
      },
      onConfirmCbqxq(data) {
        this.form.cbqxq = this.format(data, 'yyyy-MM-dd');
        this.showCbqxq = false;
      },
      onConfirmCbqxz(data) {
        this.form.cbqxz = this.format(data, 'yyyy-MM-dd');
        this.showCbqxz = false;
      },
      skip(name) {
        this.$router.push({
          name: name,
          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.form.id) {
            updateCbht(this.form).then(response => {
              if (response.code == 200) {
                this.$toast({
                  icon: 'success',
                  message: '保存成功',
                  duration:"1000",
                });
              }
            });
          } else {
            this.form.deptId = this.$route.params.deptId;
            addCbht(this.form).then(response => {
              if (response.code == 200) {
                this.$toast({
                  icon: 'success',
                  message: '保存成功',
                  duration:"1000",
                  onClose: () => {
                    this.getDetail();
                  }
                });
              }
            });
          }
        }).catch(() => {
          this.$notify({ type: 'danger', message: '请填写完整的表单项' });
        });
      },
      resetForm() {
        this.form = {
          deptId: null,
          cbhtbm: null,
          ycbhtbm: null,
          fbfbm: null,
          cbflx: '1',
          cbfmc: null,
          cbfbm: null,
          cbfs: '110',
          qdsj: this.format(new Date(), 'yyyy-MM-dd'),
          cbqxq: null,
          cbqxz: null,
          cbdkzs: null,
          htzmjm: null,
        };
        this.cbfsText = '家庭承包';
        this.cbflxText = '农户';
      },
      extension() {
        if (this.form.id) {
          this.$dialog.confirm({
            message: '是否确认将此份承包合同的承包期限延长30年？',
          }).then(() => {
            // on confirm
            extendCbht(this.form.id).then(response => {
              if (response.code == 200) {
                this.$toast.success('延期成功');
                this.form.cbqxq = response.data.startTime;
                this.form.cbqxz = response.data.endTime;
              }
            });
          }).catch(() => {
            // on cancel
          });
        }
      },
      generateCode() {
        this.form.cbhtbm = this.$route.params.cbfbm + 'J';
        this.form.fbfbm = this.$route.params.cbfbm.substring(0, 14);
        this.form.cbfmc = this.$route.params.cbfmc;
        this.form.cbfbm = this.$route.params.cbfbm;
      }
    },
  };
</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;
  }

  /deep/ .van-field__label {
    width: 225px;
  }

  /deep/ .van-field--disabled .van-field__label {
    color: #646566;
  }

    /* .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>
