<template>
  <div>
    <Tabs v-model="type" :list="typeList" @changeVal="typeChange"/>
    <div class="table" v-if="type === '4'">
      <el-table v-loading="loading" :data="list" element-loading-background="rgba(0, 0, 0, 0.3)"
                height="250px">
        <el-table-column label="资源类型" min-width="120" prop="personnelType">
          <template slot-scope="{row}">
            社区自组织
          </template>
        </el-table-column>
        <el-table-column label="所属组织" min-width="180" prop="agencyName"/>
        <el-table-column label="负责人" min-width="120" prop="principalName"/>
        <el-table-column label="联系电话" min-width="120" prop="principalPhone">
          <template slot-scope="scope">
            {{ $sensitive(scope.row.principalPhone, 3, 7) }}
          </template>
        </el-table-column>
        <!--        <el-table-column label="状态" prop="name"/>-->
        <!--        <el-table-column label="距离" prop="name"/>-->
        <el-table-column label="操作" prop="op" width="250">
          <template slot-scope="scope">
            <CallPhone text="拨打电话"/>
            <span class="view" @click="handleViews(scope.row)">查看</span>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
          v-show="total > 0"
          :limit.sync="queryParams.pageSize"
          :page.sync="queryParams.pageNo"
          :total="total"
          @pagination="pageChange"
      />
    </div>
    <div class="table" v-if="type === '5'">
      <el-table v-loading="loading" :data="list" element-loading-background="rgba(0, 0, 0, 0.3)"
                height="250px">
        <el-table-column label="资源类型" min-width="120" prop="personnelType">
          <template slot-scope="{row}">
            联建单位
          </template>
        </el-table-column>
        <el-table-column label="所属组织" min-width="180" prop="agencyName"/>
        <el-table-column label="联系人" min-width="120" prop="contact"/>
        <el-table-column label="联系电话" min-width="120" prop="contactMobile">
          <template slot-scope="scope">
            {{ $sensitive(scope.row.contactMobile, 3, 7) }}
          </template>
        </el-table-column>
        <!--        <el-table-column label="状态" prop="name"/>-->
        <!--        <el-table-column label="距离" prop="name"/>-->
        <el-table-column label="操作" prop="op" width="250">
          <template slot-scope="scope">
            <CallPhone text="拨打电话"/>
            <span class="view" @click="handleViews(scope.row)">查看</span>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
          v-show="total > 0"
          :limit.sync="queryParams.pageSize"
          :page.sync="queryParams.pageNo"
          :total="total"
          @pagination="pageChange"
      />
    </div>

    <div class="table" v-if="type !== '4' && type !== '5'">
      <el-table v-loading="loading" :data="list" element-loading-background="rgba(0, 0, 0, 0.3)"
                height="250px">
        <el-table-column label="资源类型" min-width="120" prop="personnelType">
          <template slot-scope="{row}">
            {{
              row.personnelType ? typeList.filter(item => item.value === row.personnelType)[0].label : ''
            }}
          </template>
        </el-table-column>
        <el-table-column label="所属组织" min-width="180" prop="orgName"/>
        <el-table-column label="姓名/名称" min-width="120" prop="name"/>
        <el-table-column label="联系电话" min-width="120" prop="mobile">
          <template slot-scope="scope">
            {{ $sensitive(scope.row.mobile, 3, 7) }}
          </template>
        </el-table-column>
        <!--        <el-table-column label="状态" prop="name"/>-->
        <!--        <el-table-column label="距离" prop="name"/>-->
        <el-table-column label="操作" prop="op" width="250">
          <template slot-scope="scope">
            <CallPhone text="拨打电话"/>
            <span class="view" @click="handleViews(scope.row)">查看</span>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
          v-show="total > 0"
          :limit.sync="queryParams.pageSize"
          :page.sync="queryParams.pageNo"
          :total="total"
          @pagination="pageChange"
      />
    </div>
    <MapResourceInfo ref="MapResourceInfo" :currentLevelData="currentLevelData"/>

  </div>
</template>

<script>
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination";
import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue";
import CallPhone from "@/views/dataBoard/cpts/CallPhone";
import MapResourceInfo from "@/views/dataBoard/overview/components/MapResourceInfo.vue";

export default {
  name: "DisputeDispatch",
  components: {Pagination, Tabs, CallPhone,MapResourceInfo},
  props: {
    currentLevelData: {
      type: Object,
      default: () => {
      }
    },
    catVal: {
      type: [String,Number],
      default: ""
    }
  },
  watch: {
    catVal() {
      this.typeChange(this.type)
    }
  },
  data() {
    return {
      total: 0,
      queryParams: {
        pageSize: 5,
        pageNo: 1,
      },
      type: "staffGrid",
      list: [],
      loading: false,
      typeList: [
        {
          label: "网格员",
          value: "staffGrid",
        },
        {
          label: "公益岗",
          value: "publicWelfareNum",
        },
        {
          label: "志愿者",
          value: "volunteer",
        },
        {
          label: "社区自组织",
          value: "4",
        },
        {
          label: "联建单位",
          value: "5",
        },
        {
          label: "15分钟生活圈商家",
          value: "6",
        },
      ],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleViews(data) {
      // 1志愿者、2联建单位、3社区自组织、4网格员、5公益岗
      let type = this.type === 'volunteer' ? 1 :
          this.type === '5' ? 2 :
              this.type === '4' ? 3 :
                  this.type === 'staffGrid' ? 4 :
                      this.type === 'publicWelfareNum' ? 5 : ''
      this.$refs.MapResourceInfo.open(type === 3 ? data.agencyId : data.id, type)
    },
    getList() {
      this.loading = true;
      this.$http.get("/actual/base/streetOverview/queryPersonnelGroup" +
          "?level=" + this.currentLevelData.orgLevel +
          "&orgId=" + this.currentLevelData.orgId +
          "&personnelType=" + this.type)
          .then(({data: {data}}) => {
            this.loading = false;
            this.list = data.personnelInfoVOList;
          });
    },
    getZzzList() {
      this.loading = true;
      this.$http.post('/actual/base/iccommunityselforganization/communityselforganizationlist', {
        agencyId: this.currentLevelData.orgId,
        ...this.queryParams
      }).then(res => {
        this.loading = false;
        this.list = res.data.data.list;
        this.total = res.data.data.total;
      })
    },
    getLjdwList() {
      this.loading = true;
      this.$http.post('/actual/base/icpartyunit/list', {
        agencyId: this.currentLevelData.orgId,
        serviceMatter: this.catVal,
        ...this.queryParams
      }).then(res => {
        this.loading = false;
        this.list = res.data.data.list;
        this.total = res.data.data.total;
      })
    },
    pageChange() {
      if (this.type === '4') {
        this.getZzzList();
      } else if (this.type === '5') {
        this.getLjdwList();
      } else {
        this.getList()
      }
    },
    typeChange(val) {
      this.type = val
      this.total = 0;
      this.queryParams.pageNo = 1
      if (val === '4') {
        this.getZzzList();
      } else if (val === '5') {
        this.getLjdwList();
      } else {
        this.getList()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/scss/dataBoard/table2.scss";

.table {
  margin-top: 20px;
}

.handle {
  font-size: 14px;
  margin-left: 10px;
  color: #9A69EC;
}

.view {
  font-size: 14px;
  margin-left: 10px;
  color: #007FF1;
}
</style>