<template>
  <section class="GroupList">
    <ai-list>
      <template slot="title">
        <ai-title title="群匹配" isShowBottomBorder isShowBack @onBackClick="cancel(false)"></ai-title>
      </template>
      <template #content>
        <ai-search-bar>
          <template #left>
            <ai-select v-model="search.matchStatus" :selectList="dict.getDict('xbotGroupMatchStatus')" placeholder="请选择是否匹配" @change="search.current = 1, getTableData()"/>
            <ai-select v-model="search.status" :selectList="dict.getDict('xbotGroupStatus')" placeholder="请选择群状态" @change="search.current = 1, getTableData()"/>
            <el-button type="primary" @click="match">自动匹配</el-button>
          </template>
          <template #right>
            <el-input
              v-model="search.nickname"
              size="small"
              placeholder="群名称"
              clearable
              v-throttle="() => {search.current = 1, getTableData()}"
              @clear="search.current = 1, search.nickname = '', getTableData()"
              suffix-icon="iconfont iconSearch">
            </el-input>
          </template>
        </ai-search-bar>
        <ai-table :tableData="tableData" :total="total" :current.sync="search.current" :size.sync="search.size"
                  @getList="getTableData()" :col-configs="colConfigs">
          <el-table-column slot="avatar" label="群聊头像"  align="left">
            <template slot-scope="{ row }">
              <img :src="row.avatar ? row.avatar : 'https://cdn.cunwuyun.cn/dvcp/group-img.png'" alt="" class="group-avatar">
            </template>
          </el-table-column>
          <el-table-column slot="areaName" label="所属地区"  align="center">
            <template slot-scope="{ row }">
              <div @click="changeArea(row)" style="cursor: pointer;color:#26f">{{row.areaName || '请选择'}}</div>
            </template>
          </el-table-column>
          <el-table-column slot="villageName" label="所属小区"  align="center">
            <template slot-scope="{ row }">
              <div @click="changeVillage(row)" style="cursor: pointer;color:#26f">{{row.residentialQuarters || '请选择'}}</div>
            </template>
          </el-table-column>
          <el-table-column slot="option" label="操作"  align="center">
            <template slot-scope="{ row }">
              <div class="table-options">
                <el-button type="text" @click="edit(row)">编辑</el-button>
              </div>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <ai-dialog
      :visible.sync="dialog"
      width="800px"
      @close="dialog=false"
      title="群关联信息"
      @onConfirm="onConfirm">
      <el-form class="ai-form" label-width="120px" :model="editInfo" ref="editInfo">
        <el-form-item label="群名称" style="width: 100%;">
          <div>{{editInfo.nickname}}</div>
        </el-form-item>
        <el-form-item label="群主ID" style="width: 100%;">
          <div>{{editInfo.managerWxid}}</div>
        </el-form-item>
        <el-form-item label="人员关联" prop="managerTpUserName" style="width: 100%;" :rules="[{ required: true, message: '请选择人员' }]">
          <!-- <el-input disabled size="small" v-model="editInfo.managerTpUserName" clearable placeholder="请选择人员">
            <template slot="append">
              <ai-user-selecter refs="addTags" :isMultiple="false" :instance="instance" v-model="editInfo.user" @change="onChooseUser">
                <el-button size="small">选择人员</el-button>
              </ai-user-selecter>
            </template>
          </el-input> -->
          <ai-person-select :instance="instance" :customClicker="true" :chooseUserList="chooseUserList"
            url="/app/appgirdmemberinfo/list" headerTitle="网格员列表"
            :isMultiple="false" dialogTitle="选择" @selectPerson="selectPerson" class="aipersonselect">
            <template name="option" v-slot:option="{ item }">
              <span class="iconfont iconProlife">{{ item.name }}</span>
              <ai-id mode="show" :show-eyes="false" :value="item.idNumber"/>
            </template>
          </ai-person-select>
        </el-form-item>
      </el-form>
    </ai-dialog>
    <ai-dialog
      title="所属地区设置"
      :visible.sync="showArea"
      :destroyOnClose="true"
      width="720px"
      @onConfirm="areaConfirm"
      >
      <el-form class="ai-form" :model="areaInfo" label-width="120px" ref="form">
        <el-form-item prop="areaId" style="width: 100%;" label="所属地区" :rules="[{required: true, message: '请选择所属地区', trigger: 'blur'}]">
          <ai-area-get style="width: 400px;" placeholder="所属地区" :instance="instance" v-model="areaInfo.areaId" :name.sync="areaInfo.areaName" />
        </el-form-item>
      </el-form>
    </ai-dialog>
    <ai-dialog
      title="所属小区设置"
      :visible.sync="showVillage"
      :destroyOnClose="true"
      width="720px"
      @onConfirm="villageConfirm"
      >
      <el-form class="ai-form" :model="villageInfo" label-width="120px" ref="villageForm">
        <el-form-item prop="residentialQuarters" style="width: 100%;" label="所属小区" :rules="[{required: true, message: '请选择所属小区', trigger: 'blur'}]">
          <!-- <ai-area-get style="width: 400px;" placeholder="所属小区" :instance="instance" v-model="villageInfo.villageId" :name.sync="villageInfo.villageName" /> -->
          <el-select size="small"
            v-model="villageInfo.residentialQuarters"
            filterable
            allow-create
            default-first-option
            placeholder="所属小区">
            <el-option
              v-for="item in villageOptions"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </section>

</template>

<script>
import { mapState } from "vuex";
export default {
  name: "GroupList",
  props: {
    instance: Function,
    dict: Object,
    params: Object
  },
  data() {
    return {
      search: {
        current: 1,
        size: 10,
        matchStatus: '',
        status: '',
        nickname: ''
      },
      tableData: [],
      total: 0,
      dialog: false,
      editInfo: {},
      showArea: false,
      areaInfo: {},
      chooseUserList: [],
      showVillage: false,
      villageInfo: {residentialQuarters: ''},
      villageOptions: []
    }
  },
  created() {
    this.dict.load('xbotGroupMatchStatus', 'xbotGroupStatus').then(() => {
      this.getTableData()
    })
  },
  computed: {
    ...mapState(['user']),
    colConfigs() {
      return [
       { slot: "avatar", label: '群聊头像'},
        { prop: "nickname", label: '群名称', align: 'center'},
        { prop: "managerNickname", label: '群主昵称', align: 'center'},
        { prop: "status", label: '群状态', align: 'center', dict: 'xbotGroupStatus'},
        { prop: "managerTpUserName", label: '关联人员', align: 'center'},
        { prop: "managerTpUserDeptName", label: '主部门', align: 'center'},
        { slot: "areaName", label: '所属地区', align: 'center'},
        { slot: "villageName", label: '所属小区', align: 'center'},
        { slot: "option"},
        // { prop: "status", label: '状态'},
      ]
    },
  },
  methods: {
    getTableData() {
      this.instance.post(`/app/xbotCallback/groupMatchList`,null,{
        params: {
          ...this.search,
          managerWxid: this.params.loginUserId
        }
      }).then(res => {
        if(res?.data) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    showDialog(row) {
      this.dialog = true
      this.groupInfo = row
      this.getTableDataGroup()
    },
    getTableDataGroup() {
      this.instance.post(`/app/xbotCallback/groupList`,null,{
        params: {
          // ...this.searchGroup,
          current: 1,
          managerWxid: this.groupInfo.loginUserId
        }
      }).then(res => {
        if(res?.data) {
          this.tableDataGroup = JSON.parse(res.data)
          this.tableDataGroup.map((item) => {
            item.num = item.member_list.length
          })
          // this.totalGroup = res.data.total
        }
      })
    },
    cancel(isRefresh) {
      this.$emit('change', {
        type: 'List',
        isRefresh: !!isRefresh
      })
    },
    match() {
      this.instance.post(`/app/xbotCallback/automaticMatch`,null,{
        params: {
          managerWxid: this.params.loginUserId
        }
      }).then(res => {
        if(res.code == 0) {
          this.$message.success('匹配成功!')
          this.getTableData()
        }
      })
    },
    edit(row) {
      this.dialog = true
      this.editInfo = {...row}
      this.chooseUserList = [{id: row.managerTpwxid, name: row.managerTpUserName}]
    },
    onChooseUser(v) {
      this.editInfo.wxUserId = v[0].id
      this.editInfo.managerTpUserName = v[0].name
      this.editInfo.user = v
    },
    onConfirm() {
      this.$refs.editInfo.validate(v => {
        if (v) {
          this.instance.post('/app/xbotCallback/manualMatch', null, {
            params: {
              wxUserId: this.editInfo.wxUserId,
              wxid: this.editInfo.wxid
            }
          }).then(res => {
            if (res?.code == 0) {
              this.dialog = false
              this.getTableData()
              this.$message.success('编辑成功!')
            }
          })
        }
      })
    },
    changeArea(row) {
      this.showArea = true
      this.areaInfo = {...row}
      this.$refs['form'].clearValidate();
    },
    areaConfirm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.instance.post(`app/xbotCallback/updateGroupArea?wxid=${this.areaInfo.wxid}&areaId=${this.areaInfo.areaId}&areaName=${this.areaInfo.areaName}`).then(res => {
            if (res.code == 0) {
              this.$message.success('所属地区设置成功')
              this.showArea = false
              this.getTableData()
            }
          })
        } else {
          return false
        }
      });
    },
    changeVillage(row) {
      if(!row.areaId) return this.$message.error('请先选所属地区')
      this.instance.post(`app/xbotCallback/residentialQuarters?areaId=${row.areaId}`).then(res => {
        if (res.code == 0) {
          this.villageOptions = res.data
        }
      })
      this.showVillage = true
      this.villageInfo = {...row}
      this.$refs['villageForm'].clearValidate();
    },
    villageConfirm() {
      this.$refs['villageForm'].validate((valid) => {
        if (valid) {
          this.instance.post(`app/xbotCallback/updateGroupResidentialQuarters?wxid=${this.villageInfo.wxid}&residentialQuarters=${this.villageInfo.residentialQuarters}`).then(res => {
            if (res.code == 0) {
              this.$message.success('所属小区设置成功')
              this.showVillage = false
              this.getTableData()
            }
          })
        } else {
          return false
        }
      });
    },

    selectPerson(val) {
      if (val) {
        this.editInfo.managerTpUserName = val.name
        this.editInfo.wxUserId = val.wxUserId
      } else {
        this.editInfo.managerTpUserName = ''
        this.editInfo.wxUserId = ''
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.GroupList {
  height: 100%;

  .time-select {
    padding: 0 16px;
    height: 32px;
    line-height: 32px;
    border: 1px solid #d0d4dc;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    .el-icon-arrow-down {
      line-height: 32px;
    }
  }

  :deep .is-error {
    .time-select {
      border: 1px solid #f46!important;
    }
  }
  .tips {
    display: inline-block;
    color: #999;
    font-size: 14px;
    margin-left: 16px;
  }
  .group-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  :deep .ai-dialog__content--wrapper {
    // height: 1000px;
    // overflow-y: scroll;
    .ai-table {
      // height: 1000px;
    }
  }
}
</style>
