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

    <van-nav-bar :title="$route.query.deptName" left-arrow fixed placeholder @click-left="$router.push({path:'/contracted/index'})" />

    <div class="tap_block">
      <p @click="$router.push({path:'/contracted/village/contractor', query: { deptId: $route.query.deptId, deptName: $route.query.deptName }})">承包方</p>
      <p @click="$router.push({path:'/contracted/village/employer', query: { deptId: $route.query.deptId, deptName: $route.query.deptName }})">发包方</p>
      <p class="active">地块</p>
      <p @click="$router.push({path:'/contracted/village/map', query: { deptId: $route.query.deptId, deptName: $route.query.deptName }})">地图</p>
    </div>

    <div class="search_main">

      <van-search
        v-model="value"
        shape="round"
        background="transparent"
        placeholder="请输入地块名称搜索"
        @search="onSearch"
      ></van-search>

      <div class="search_btn" @click="goDetail()" v-if="taskStatus === '2'">
        <p class="active"> + 新增</p>
      </div>

    </div>

    <div class="second_tap">
      <!-- <p class="active">承包</p>
      <p>自留</p>
      <p>机动</p>
      <p>开荒</p>
      <p>其他</p> -->
      <p v-for="dict in dklbOptions" :key="dict.dictValue" :class="{active: landCategory === dict.dictValue}" @click="landCategoryChange(dict.dictValue, dict.dictLabel)">{{dict.dictLabel}}</p>
    </div>

    <p class="page_tab">{{ tagName }} <span>{{ totalNum }}块</span></p>
    <div class="list_main">
      <van-row style="color: #888888;font-size: 14px;">
        <van-col span="9">地块代码</van-col>
        <van-col span="10">地块名称</van-col>
        <van-col span="5">面积（亩）</van-col>
      </van-row>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="getList"
      >
        <van-swipe-cell v-for="(item,index) in landList">
          <van-row @click="goDetail(item.id)">
            <van-col span="9">{{ item.dkbm }}</van-col>
            <van-col span="10">{{ item.dkmc }}</van-col>
            <van-col span="5" style="color: #f78200">{{ item.scmjm }}</van-col>
          </van-row>
          <template #right v-if="taskStatus === '2'">
            <van-button square type="danger" text="删除" native-type="button" @click="deleteLand(item.id, index)" />
          </template>
        </van-swipe-cell>
      </van-list>
    </div>

  </div>
</template>
<script>
  import Cookies from "js-cookie";
  import { listDk, deleteDk } from "@/api/contracted/dk";

  export default {
    name: "contractedVillageContractor",
    data() {
      return {
        loading:false,
        finished:false,
        value:'',
        // 查询参数
        queryParams: {
          deptId: null,
          dkmc: null,
          dklb: null,
          pageNum:1,
          pageSize:20,
          // 查询排序
          orderByColumn: "id",
          isAsc: "desc",
        },
        // 地块类别字典
        dklbOptions: [],
        // 地块类别
        landCategory: null,
        // 当前选中的地块类别
        tagName: null,
        // 当前调查状态下的地块总数
        totalNum: 0,
        // 地块列表
        landList: [],
        // 调查任务的完成状态：1表示已完成，2表示未完成
        taskStatus: null,
      };
    },
    created() {
      this.taskStatus = Cookies.get('taskStatus');
      this.queryParams.deptId = this.$route.query.deptId;
      this.getDicts("land_type").then(response => {
        this.dklbOptions = response.data;
        if (this.dklbOptions.length > 0) {
          const dklb = this.$route.query.dklb;
          this.queryParams.dklb = dklb ? dklb : this.dklbOptions[0].dictValue;
          this.landCategory = dklb ? dklb : this.dklbOptions[0].dictValue;
          this.tagName = dklb ? this.selectDictLabel(this.dklbOptions, dklb) : this.dklbOptions[0].dictLabel;
        }
        this.getList();
      });
    },
    methods: {
      getList(){
        this.loading = true;
        listDk(this.queryParams).then(response => {
          response.rows.forEach(item => {
            this.landList.push(item);
          });
          this.totalNum = response.total;
          if (this.landList.length >= response.total) {
            this.finished = true;
            return;
          } else {
            this.loading = false;
            this.queryParams.pageNum += 1;
          }
        });
      },
      onSearch(){
        this.queryParams.dkmc = this.value;
        this.queryData();
      },
      landCategoryChange(dictValue, dictLabel) {
        this.landCategory = dictValue;
        this.queryParams.dklb = dictValue;
        this.tagName = dictLabel;
        this.totalNum = 0;
        this.queryData();
      },
      queryData() {
        this.queryParams.pageNum = 1;
        this.finished = false;
        this.landList = [];
        this.getList();
      },
      goDetail(id){
        if (id) {
          this.$router.push({
            path:'/contracted/village/massifDetail',
            query: {
              deptId: this.$route.query.deptId,
              deptName: this.$route.query.deptName,
              id: id
            }
          });
        } else {
          this.$router.push({
            path:'/contracted/village/massifDetail',
            query: {
              deptId: this.$route.query.deptId,
              deptName: this.$route.query.deptName
            }
          });
        }
      },
      deleteLand(id, index) {
        this.$dialog.confirm({
          message: '是否确认删除此地块？',
        }).then(() => {
          // on confirm
          deleteDk(id).then(res => {
            if (res.code == 200) {
              this.$toast({
                icon: 'success',
                message: '删除成功',
                duration: "1000",
                onClose: () => {
                  this.landList.splice(index, 1);
                  this.totalNum = this.totalNum - 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;
  }

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

  .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 5PX;
      margin-right: 3vw;
      border-radius: 50PX;
    }
    .active{
      background: #99eecb;
      border-color: #48e5a2;
      color: #333333;
    }
  }

  .page_tab{
    position: absolute;
    background: rgba(255,255,255,.5);
    padding: 3PX 10PX 15PX;
    color: #828282;
    right: 4vw;
    border-top-left-radius: 10PX;
    border-top-right-radius: 10PX;
    margin-top: 1.5vh;
    span{
      color: #f78200;
    }
  }

  .list_main{
    margin-top: 4vh;
    overflow-y: scroll;
    text-align: center;
    background: #ffffff;
    border-top-left-radius: 10PX;
    border-top-right-radius: 10PX;
    height: 75vh;
    overflow-y: scroll;
    .van-col{
      padding: 15PX 0;
    }
  }

</style>
