<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 @click="skip('contractedVillageContractorWord')">承包合同</p>
      <p class="active">承包地</p>
    </div>

    <div class="function_main">
      <div class="function_btn1" @click="skip('contractedVillageContractorLandMap')">
        <p class="active">进入地图 <span class="sanjiao-right"></span></p>
      </div>
      <div class="function_btn2" @click="goDetail()" v-if="taskStatus === '2' && $route.params.surveyStatus !== '3'">
        <p class="active"> + 新增</p>
      </div>
    </div>

    <div class="list_main">

      <van-swipe-cell v-for="(item,index) in landList" :key="item.id">
        <div class="item" @click="goDetail(item.id)">
          <div class="item_tt">
            <p>{{ item.dkmc }}</p>
            <p>{{ item.dkbm }}</p>
          </div>
          <div class="item_type">
            <p>{{ item.htmjm }}亩</p>
<!--            <p>{{ item.tdlylx }}</p>-->
            <p>{{ item.dldj }}</p>
            <p>{{ item.tdyt }}</p>
            <p>基本农田:{{ item.sfjbnt }}</p>
          </div>
          <div class="item_direction">
<!--            <p>{{ item.zjrxm }}指界</p>-->
            <p>东:{{ item.dkdz }}</p>
            <p>西:{{ item. dkxz }}</p>
            <p>南:{{ item.dknz }}</p>
            <p>北:{{ item.dkbz }}</p>
          </div>
        </div>
        <template #right v-if="taskStatus === '2' && $route.params.surveyStatus !== '3'">
          <div class="operation">
            <!-- delete 删除 edit编辑 view查看 list榜单 -->
            <div class="opera_btn edit" @click="transferLand(item.id)">
              <p>转给<br/>他方</p>
            </div>
            <div class="opera_btn delete" @click="deleteLand(item.id, index)">
              <p>取消<br/>承包</p>
            </div>
          </div>
        </template>
      </van-swipe-cell>
      <van-popup v-model="showContractorPopup" position="bottom">
        <van-search v-model="searchKeyword"  placeholder="请输入姓名搜索" />
        <van-picker
          show-toolbar
          :columns="filteredContractors"
          @confirm="onConfirmContractorOptions"
          @cancel="showContractorPopup = false"
        >
          <template #option="option">
            <div style="display: flex; flex-direction: column; align-items: center;">
              <div>{{option.cbfmc}}-{{option.cbfbm}}</div>
            </div>
          </template>
        </van-picker>
      </van-popup>
    </div>


  </div>
</template>
<script>
  import Cookies from "js-cookie";
  import contractorHeader from "./contractorHeader";
  import { listCbdkxx, deleteCbdkxx, transferCbdkxx } from "@/api/contracted/cbdkxx";
  import { listCbf } from "@/api/contracted/cbf";
  import { getCbht } from "@/api/contracted/cbht";

  export default {
    name: "contractedVillageContractor",
    components: {
      contractorHeader
    },
    data() {
      return {
        landList: [],                   // 承包地块列表
        contractorList: [],             // 承包方列表
        showContractorPopup: false,     // 控制承包方信息弹出层的显示和隐藏
        transferLandId: null,           // 转出的承包地块ID
        taskStatus: null,               // 调查任务的完成状态：1表示已完成，2表示未完成
        searchKeyword: '',              // 弹出框查询关键字
      };
    },
    created() {
      this.taskStatus = Cookies.get('taskStatus');
      this.getList();
      this.getContractorList();
    },
    computed: {
      filteredContractors() {
        return this.contractorList.filter(item => {
          return item.cbfmc.indexOf(this.searchKeyword) !== -1;
        })
      }
    },
    methods: {
      getList(){
        listCbdkxx({cbfbm: this.$route.params.cbfbm, translate_dict: 1}).then(response => {
          this.landList = response.rows;
        });
      },
      getContractorList() {
        listCbf({deptId: this.$route.params.deptId}).then(response => {
          this.contractorList = response.rows;
        });
      },
      goDetail(id){
        if (!id) {
          // 新增时，查看承包合同是否存在
          getCbht(this.$route.params.cbfbm).then(response => {
            if (!response.data) {
              this.$toast({
                icon: 'fail', // 找到自己需要的图标
                message: '承包合同不存在，请先添加承包合同信息',
                duration:"2000"
              });
              return ;
            } else {
              this.$router.push({
                name: 'contractedVillageContractorLandDetail',
                params: {
                  deptId: this.$route.params.deptId,
                  cbfbm: this.$route.params.cbfbm,
                  cbfmc: this.$route.params.cbfmc,
                  surveyStatus: this.$route.params.surveyStatus
                }
              });
            }
          });
        } else {
        this.$router.push({
          name: 'contractedVillageContractorLandDetail',
          params: {
            id: id,
            deptId: this.$route.params.deptId,
            cbfbm: this.$route.params.cbfbm,
            cbfmc: this.$route.params.cbfmc,
            surveyStatus: this.$route.params.surveyStatus
          }
        });
        }
      },
      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
          }
        });
      },
      transferLand(id) {
        this.transferLandId = id;
        this.searchKeyword = '';
        this.showContractorPopup = true;
      },
      onConfirmContractorOptions(value) {
        this.$dialog.confirm({
          message: '是否确认将此承包地块转给' + value.cbfmc + '？',
        }).then(() => {
          // on confirm
          this.showContractorPopup = false;
          transferCbdkxx({id: this.transferLandId, cbfbm: value.cbfbm}).then(response => {
            if (response.code == 200) {
              this.$toast({
                icon: 'success',
                message: '转出成功',
                duration:"1000",
                onClose: () => {
                  const index = this.landList.findIndex(item => item.id === this.transferLandId);
                  this.landList.splice(index, 1);
                }
              });
            }
          });
        }).catch(() => {
          // on cancel
        });
      },
      deleteLand(id, index) {
        this.$dialog.confirm({
          message: '是否确认取消承包此地块？',
        }).then(() => {
          // on confirm
          deleteCbdkxx(id).then(res => {
            if (res.code == 200) {
              this.$toast({
                icon: 'success',
                message: '取消成功',
                duration: "1000",
                onClose: () => {
                  this.landList.splice(index, 1);
                }
              });
            }
          });
        }).catch(() => {
          // on cancel
        });
      }
    },
  };
</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-ellipsis{
    overflow: initial;
  }

  .function_main{
    display: flex;
    align-items: center;
    margin-top: 2vh;
    .function_btn1{
      background: rgba(255,255,255,.5);
      width: 25%;
      border-radius: 50PX;
      padding: 2PX;
      .active{
        background-image: linear-gradient(to right,#ffdc93,#fc8708);
        color: #333333;
        border-radius: 50PX;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5PX 0;
      }
      .sanjiao-right {
        display: inline-block;
        border-left: 8PX solid #000;
        border-left-color: initial;
        border-top: 5PX solid transparent;
        border-bottom: 5PX solid transparent;
        margin-left: 5PX;
      }
    }
    .function_btn2{
      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;
        padding: 5PX 0;
      }
    }
  }

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

  .list_main{
    margin-top: 2vh;
    text-align: center;
    height: 88vh;
    overflow-y: scroll;
    padding-bottom: 15vh;
    .item{
      border-radius: 30px;
      background: #fff;
      box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
      padding:25px 32px;
      margin-bottom: 20px;
      font-size: 14PX;
      .item_tt{
        display: flex;
        justify-content: space-between;
        align-items: center;
        p:first-child{
          font-size: 16PX;
          color: #333333;
        }
        p:last-child{
          color: #44e4a3;
        }
      }
      .item_type{
        display: flex;
        justify-content: space-between;
        align-items: center;
        color:#5f5f5f;
        margin-top: 1vh;
        p:nth-child(1){
          color: #fb9627;
          border: 1px solid #fb9627;
          padding: 0 10PX;
          border-radius: 50PX;
        }
        span{
          color: #ffffff;
          background: #fb9627;
          border-radius: 100%;
          display: inline-block;
          width: 15PX;
          height: 15PX;
          line-height: 15PX;
          font-size: 12PX;
          margin-right: 5PX;
        }
      }
      .item_direction{
        display: flex;
        justify-content: space-between;
        align-items: center;
        color:#5f5f5f;
        margin-top: 1vh;
      }

    }
    .operation{
      display: flex;
      align-items: center;
      justify-content: right;
      text-align: center;
      background: #fff;
      box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
      height: 100%;
      border-radius: 30px;
      margin-left: 2vw;
      overflow: hidden;
      .opera_btn{
        height: 100%;
        display: flex;
        align-items: center;
        color: #ffffff;
        padding: 0 5vw;
        &.delete{
          background:#fb9627;
        }
        &.view{
          background: #48e5a2;
        }
        &.edit{
          background: #48e5a2;
        }
        &.list{
          background: #fb9627;
        }
      }
    }
    .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: 2vh auto 0;
      text-align: center;
    }
  }

</style>
