<template>
  <div class="field-info">
    <el-tabs v-model="activeTab" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="basicInfo">
        <el-row :gutter="20">
          <el-form label-width="120px" :inline="true">
            <el-col :span="6">
              <el-form-item label="地块编号">
                <span>{{ basicInfo.fieldCode }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="地块名称">
                <span>{{ basicInfo.fieldName }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="所属农场">
                <span>{{ basicInfo.dept.deptName }}</span>

              </el-form-item>
            </el-col>

            <!--  <el-col :span="6">
              <el-form-item label="所属区域">
                <span>{{ basicInfo.region }}</span>
              </el-form-item>
            </el-col> -->


            <el-col :span="6">
              <el-form-item label="地块类型">
                <!-- <span>{{ basicInfo.fieldType }}</span> -->
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.sys_field_type" :value="basicInfo.fieldType" />
                </template>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="面积(亩)">
                <span>{{ basicInfo.size }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="种植作物">
                <span>{{ basicInfo.growCrops }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="土壤类型">
                <!-- <span>{{ basicInfo.soilType }}</span> -->
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.field_soil_type" :value="basicInfo.soilType" />
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="灌溉方式">
                <!-- <span>{{ basicInfo.irrigationType }}</span> -->
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.field_irrigation_type" :value="basicInfo.irrigationType" />
                </template>
              </el-form-item></el-col>
            <el-col :span="6">
              <el-form-item label="使用状态">
                <!-- <el-tag :type="getTagType(basicInfo.status)">{{ basicInfo.status }}</el-tag> -->
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.field_status" :value="basicInfo.status" />
                </template>
              </el-form-item></el-col>
            <el-col :span="6">
              <el-form-item label="绑定设备">
                <span>{{ basicInfo.bindDeviceCount }}</span>
              </el-form-item></el-col>
            <el-col :span="6">
              <el-form-item label="绑定人员">
                <span>{{ basicInfo.bindUserCount }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="负责人">
                <span>{{ basicInfo.managerName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建时间">
                <span>{{ basicInfo.createdTime }}</span>
              </el-form-item></el-col>
            <el-col :span="6">
              <el-form-item label="上次更新">
                <span>{{ basicInfo.updatedTime }}</span>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <!-- <el-card>
          <el-table :data="cropInfo" style="width: 100%">
            <el-table-column prop="cropName" label="作物名称"></el-table-column>
            <el-table-column prop="plantedArea" label="种植面积(亩)"></el-table-column>
            <el-table-column prop="plantingDate" label="种植时间"></el-table-column>
            <el-table-column prop="expectedHarvestDate" label="预计收获时间"></el-table-column>
            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">
                <el-tag :type="getTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card> -->
      </el-tab-pane>
      <el-tab-pane label="设备绑定" name="deviceBinding">
        <h1>设备列表</h1>
        <el-card>
          <el-tabs type="border-card" @tab-click="handleClickByDevice">
            <el-tab-pane label="已绑定">
              <el-table :data="device" style="width: 100%">
                <el-table-column prop="deviceId" label="设备编号"></el-table-column>
                <el-table-column prop="deviceName" label="设备名称"></el-table-column>
                <el-table-column label="设备类型" prop="deviceTypeId">
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.device_type" :value="scope.row.deviceTypeId" />
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态">
                  <template slot-scope="scope">

                    <dict-tag :options="dict.type.device_status" :value="scope.row.status" />
                  </template>
                </el-table-column>

                <el-table-column prop="bindTime" label="绑定时间"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" @click="handleBindStatus(scope.row)">
                      {{ scope.row.bindStatus === 0 ? '解绑' : '绑定' }}
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

            </el-tab-pane>
            <el-tab-pane label="未绑定">
              <el-table :data="unDevice" style="width: 100%">
                <el-table-column prop="deviceId" label="设备编号"></el-table-column>
                <el-table-column prop="deviceName" label="设备名称"></el-table-column>
                <el-table-column label="设备类型" prop="deviceTypeId">
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.device_type" :value="scope.row.deviceTypeId" />
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态">
                  <template slot-scope="scope">

                    <dict-tag :options="dict.type.device_status" :value="scope.row.status" />
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" @click="handleBindStatus(scope.row)">
                      {{ scope.row.bindStatus === 0 ? '解绑' : '绑定' }}
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
          <!-- <el-table :data="device" style="width: 100%">
            <el-table-column prop="deviceId" label="设备编号"></el-table-column>
            <el-table-column prop="deviceName" label="设备名称"></el-table-column>
            <el-table-column label="设备类型" prop="deviceTypeId">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.device_type" :value="scope.row.deviceTypeId" />
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">

                <dict-tag :options="dict.type.device_status" :value="scope.row.status" />
              </template>
            </el-table-column>

            <el-table-column prop="bindTime" label="绑定时间"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="handleBindStatus(scope.row)">
                  {{ scope.row.bindStatus === 0 ? '解绑' : '绑定' }}
                </el-button>
              </template>
            </el-table-column>
          </el-table> -->
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="人员绑定" name="userBinding">
        <h1>人员列表</h1>
        <el-card>
          <el-tabs type="border-card" @tab-click="handleClickByUser">
            <el-tab-pane label="已绑定">
              <el-table :data="userBind" style="width: 100%">
                <!-- <el-table-column prop="cropName" label="工号"></el-table-column> -->
                <el-table-column prop="userName" label="姓名"></el-table-column>
                <el-table-column prop="postName" label="职位"></el-table-column>
                <el-table-column prop="phonenumber" label="联系方式"></el-table-column>

                <el-table-column prop="bindingTime" label="绑定时间"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" @click="userUnBindStatus(scope.row)">
                      解绑
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

            </el-tab-pane>
            <el-tab-pane label="未绑定">
              <el-table :data="userUnBind" style="width: 100%">
                <!--  <el-table-column prop="cropName" label="工号"></el-table-column> -->
                <el-table-column prop="userName" label="姓名"></el-table-column>
                <el-table-column prop="postName" label="职位"></el-table-column>
                <el-table-column prop="phonenumber" label="联系方式"></el-table-column>

                <!-- <el-table-column prop="bindingTime" label="绑定时间"></el-table-column> -->
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" @click="userBindStatus(scope.row)">
                      绑定
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
          <!-- <el-table :data="userBind" style="width: 100%">
            <el-table-column prop="cropName" label="工号"></el-table-column>
            <el-table-column prop="userName" label="姓名"></el-table-column>
            <el-table-column prop="postName" label="职位"></el-table-column>
            <el-table-column prop="phonenumber" label="联系方式"></el-table-column>

            <el-table-column prop="bindingTime" label="绑定时间"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="userBindStatus(scope.row)">
                  {{ scope.row.bindStatus === 0 ? '解绑' : '绑定' }}
                </el-button>
              </template>
            </el-table-column>
          </el-table> -->
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="区域绘制" name="areaDrawing">

        <map-container></map-container>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

import {
  getField, getUserField, getDeviceField,
  bindFieldDevice, unbindFieldDevice, unbindFieldUser,
  bindFieldUser, getDeviceUnField, getDeviceUnUser
} from "@/api/base/field"
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import MapContainer from "@/components/Map/index";

export default {
  components: { Treeselect, MapContainer },
  dicts: ['field_status', 'field_irrigation_type', 'field_soil_type', 'sys_field_type', 'device_type', 'device_status'],
  data() {
    return {


      activeTab: 'basicInfo',
      basicInfo: {
        fieldCode: null,
        fieldName: null,
        farmName: null,
        // region: '东区',
        fieldType: null,
        size: null,
        growCrops: null,
        soilType: null,
        irrigationType: null,
        status: null,
        devices: null,
        bindPeople: null,
        manager: null,
        createdTime: null,
        updatedTime: null
      },
      cropInfo: [
        {
          cropName: null,
          plantedArea: null,
          plantingDate: null,
          expectedHarvestDate: null,
          status: null
        }
      ],
      device: [
        {
          cropName: null,
          plantedArea: null,
          plantingDate: null,
          expectedHarvestDate: null,
          status: null
        }
      ],

      unDevice: [
        {
          cropName: null,
          plantedArea: null,
          plantingDate: null,
          expectedHarvestDate: null,
          status: null
        }
      ],
      userBind: [
        {
          userName: null,
          postName: null,
          phonenumber: null,
          bindingTime: null,
        }
      ],
      userUnBind: [
        {
          userName: null,
          postName: null,
          phonenumber: null,
          bindingTime: null,
        }
      ],
    };
  },
  created() {
    // 获取传过来的数据，并赋值给本页面中的数据
    console.log(this.$route.params.id);
    // this.getDeptTree();
    getField(this.$route.params.id).then(response => {
      this.basicInfo = response.data;
    })

  },

  methods: {

    handleClickByUser(tab, event) {
      if (tab.index == 0) {
        getUserField(this.$route.params.id).then(response => {
          this.userBind = response.data;
        })
      } else {
        getDeviceUnUser(this.$route.params.id).then(response => {
          this.userUnBind = response.data;
        })
      }
    },

    handleClickByDevice(tab, event) {
      if (tab.index == 0) {
        getDeviceField(this.$route.params.id).then(response => {
          this.device = response.data;
        })
      } else {
        getDeviceUnField(this.$route.params.id).then(response => {
          this.unDevice = response.data;
        })
      }
    },


    /* 切换事件 */
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.index == 0) {
        console.log("第一个");

      } else if (tab.index == 1) {
        getDeviceField(this.$route.params.id).then(response => {
          this.device = response.data;
        })

      } else if (tab.index == 2) {
        getUserField(this.$route.params.id).then(response => {
          this.userBind = response.data;
        })
      } else {

      }

    },
    /* 绑定解绑操作 */
    handleBindStatus(row) {
      let ids = [];
      ids.push(this.$route.params.id);
      ids.push(row.id);
      if (row.bindStatus === 0) {
        // 执行解绑操作
        /* console.log('解绑', row);
        unbindFieldDevice(ids); */
        this.$modal.confirm('是否确认解绑该设备？').then(function () {
          return unbindFieldDevice(ids)
        }).then(() => {
          getDeviceField(this.$route.params.id).then(response => {
            this.device = response.data;
          })
          this.$modal.msgSuccess("解绑成功")
        }).catch(() => { })

      } else {

        console.log('绑定设备', row);
        console.log(ids);

        /* bindFieldDevice(ids); */

        this.$modal.confirm('是否确认绑定该设备？').then(function () {
          return bindFieldDevice(ids)
        }).then(() => {
          getDeviceField(this.$route.params.id).then(response => {
            this.device = response.data;
          })
          this.$modal.msgSuccess("绑定成功")
        }).catch(() => { })
      }
    },

    userBindStatus(row) {
      let ids = [];
      ids.push(this.$route.params.id);
      ids.push(row.userId);

      this.$modal.confirm('是否确认绑定该人员？').then(function () {
        return bindFieldUser(ids)
      }).then(() => {
        getDeviceUnUser(this.$route.params.id).then(response => {
          this.userUnBind = response.data;
        })
        this.$modal.msgSuccess("绑定成功")
      }).catch(() => { })

    },


    userUnBindStatus(row) {
      let ids = [];
      ids.push(this.$route.params.id);
      ids.push(row.userId);

      this.$modal.confirm('是否确认解绑该人员？').then(function () {
        return unbindFieldUser(ids)
      }).then(() => {
        getUserField(this.$route.params.id).then(response => {
          this.userBind = response.data;
        })
        this.$modal.msgSuccess("解绑成功")
      }).catch(() => { })
    },


    /**查询对应的负责人 */
    queryPersonCharge() {

    },

    getTagType(status) {
      switch (status) {
        case '使用中':
          return 'success';
        case '生长中':
          return 'info';
        default:
          return 'danger';
      }
    }
  },
  unbindDevice(device) {
    this.$confirm('确认解绑该设备吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      this.devices = this.devices.filter(d => d !== device);
      this.$message.success('解绑成功');
    }).catch(() => {
      this.$message.info('已取消解绑');
    });
  },
};
</script>

<style scoped>
.field-info {
  padding: 20px;
}

#container {
  width: 100%;
  height: 800px;
}
</style>
