<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="KEYWORDS" placeholder="企业名称" class="filter-item" style="width: 200px;"/>
      <div class="filter-lable w80">审核状态：</div>
      <el-select v-model="AUDITSTATUS" placeholder="请选择" clearable style="width: 100px" class="filter-item" >
        <el-option v-for="item in auditList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <div class="filter-lable w80">企业类型：</div>
      <el-select v-model="SMALL_TYPE" placeholder="请选择" clearable style="width: 100px" class="filter-item" >
        <el-option v-for="item in smallList" :key="item.DICTIONARIES_ID" :label="item.NAME" :value="item.DICTIONARIES_ID" @click.native="getCorpType2(item.DICTIONARIES_ID)"/>
      </el-select>
      <el-select v-model="SMALL_TYPE2" placeholder="请选择" clearable style="width: 100px" class="filter-item" >
        <el-option v-for="item in small2List" :key="item.DICTIONARIES_ID" :label="item.NAME" :value="item.DICTIONARIES_ID" />
      </el-select>
      <div class="filter-lable w50">属地：</div>
      <el-select v-model="COUNTRY" placeholder="区/县" clearable style="width: 100px" class="filter-item" >
        <el-option v-for="item in countryList" :key="item.BIANMA" :label="item.NAME" :value="item.BIANMA" @click.native="getVillageList(item.BIANMA,item.DICTIONARIES_ID)"/>
      </el-select>
      <el-select v-model="VILLAGE" placeholder="镇/街" clearable style="width: 100px" class="filter-item" >
        <el-option v-for="item in villageList" :key="item.BIANMA" :label="item.NAME" :value="item.BIANMA" @click.native="getStreetList(item.BIANMA,item.DICTIONARIES_ID)" />
      </el-select>
      <el-select v-model="STREET" placeholder="村/社区" clearable style="width: 100px" class="filter-item">
        <el-option v-for="item in streetList" :key="item.BIANMA" :label="item.NAME" :value="item.BIANMA" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
        搜索
      </el-button>
      <el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="goKeyReset">
        重置
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      ref="multipleTable"
      :row-key="getRowKey"
      :data="varList"
      :header-cell-style="{
        'font-weight': 'bold',
        'color': '#000'
      }"
      tooltip-effect="dark"
      border
      fit
      highlight-current-row
    >
      <el-table-column :reserve-selection="true" type="selection" width="55" align="center" />
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column prop="CORP_NAME" label="企业名称" >
        <template slot-scope="{row}">
          <template v-if="row.img2==0">
            <span style="color: red">{{ row.CORP_NAME }}</span>
          </template>
          <template v-if="row.img2>0 && row.img1==0">
            <span style="color:orange">{{ row.CORP_NAME }}</span>
          </template>
          <template v-if="row.img2>0 && row.img1>0">
            <span>{{ row.CORP_NAME }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="CODE" label="统一社会信用代码" />
      <el-table-column prop="TYPE_NAME" label="企业类型" />
      <el-table-column label="属地" >
        <template slot-scope="{row}">
          {{ row.CITY_NAME }} {{ row.COUNTRY_NAME?('-- '+ row.COUNTRY_NAME ):'' }} {{ row.VILLAGE_NAME?(' -- '+row.VILLAGE_NAME):'' }}
        </template>
      </el-table-column>
      <el-table-column prop="GRID_MEMBER" label="网格员" />
      <el-table-column label="状态" >
        <template slot-scope="{row}">
          <span v-if="row.AUDITSTATUS==-3">审核驳回</span>
          <span v-if="row.AUDITSTATUS==3">审核通过</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="left" width="350">
        <template slot-scope="{row}">
          <el-button type="primary" icon="el-icon-view" size="mini" @click="goRecord(row.CORPINFO_ID)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-btn-group">
      <div/>
      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </div>

  </div>
</template>

<script>
import { Message } from 'element-ui'
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
import SelectTree from '@/components/SelectTree'
export default {
  components: { Pagination, SelectTree },
  directives: { waves },
  data() {
    return {
      listLoading: true,
      add: false,
      del: false,
      edit: false,
      listQuery: {
        page: 1,
        limit: 10
      },
      total: 0,
      CITY_CODE: '',
      KEYWORDS: '',
      AUDITSTATUS: '',
      SMALL_TYPE: '',
      SMALL_TYPE2: '',
      auditList: [{ label: '未通过', value: '-3' }, { label: '通过', value: '3' }],
      smallList: [], // 请选择企业类型
      small2List: [],
      countryList: [],
      COUNTRY: '',
      villageList: [],
      VILLAGE: '',
      streetList: [],
      STREET: '',
      varList: [],
      pd: [],

      // 修改属地
      dialogAreaFormEdit: false,
      editArea: {
        countryList: [],
        villageList: [],
        streetList: []
      },
      areaForm: {
        COUNTRY: '',
        VILLAGE: '',
        STREET: ''
      },
      areaFormRules: {
        COUNTRY: [
          { required: true, message: '请选择区/县', trigger: 'change' }
        ],
        VILLAGE: [
          { required: true, message: '请选择镇/街', trigger: 'change' }
        ],
        STREET: [
          { required: true, message: '请选择村/社区', trigger: 'change' }
        ]
      },

      // 修改类型
      dialogTypeFormEdit: false,
      editType: {
        smallList: [], // 请选择企业类型
        small2List: []
      },
      typeForm: {
        SMALL_TYPE: '',
        SMALL_TYPE2: ''
      },
      typeFormRules: {
        SMALL_TYPE: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ],
        SMALL_TYPE2: [
          { required: true, message: '请选择子类型', trigger: 'change' }
        ]
      },

      // 修改网格员
      dialogGridFormEdit: false,
      editGrid: {
        countryList: [],
        villageList: [],
        userList: []
      },
      gridForm: {
        COUNTRY: '',
        VILLAGE: '',
        USER_ID: ''
      },
      gridFormRules: {
        // USER_ID: [
        //   { required: true, message: '请选择网格员', trigger: 'change' }
        // ]
      }
    }
  },
  async created() {
    await this.getList()
    this.getCountryList()
    this.getCorpType()
  },
  methods: {
    getRowKey(row) {
      return row.CORPINFO_ID
    },
    handleAreaEdit() {
      const _selectData = this.$refs.multipleTable.selection
      const ids = _selectData.map((item, index) => {
        return item.CORPINFO_ID
      }).join(',')

      if (!ids) {
        this.$message({
          message: '请勾选要修改的企业',
          type: 'error'
        })
        return
      }
      this.editArea = {
        countryList: this.countryList,
        villageList: [],
        streetList: []
      }
      this.areaForm = {
        COUNTRY: '',
        VILLAGE: '',
        STREET: ''
      }
      this.CORPINFO_IDS = ids
      this.dialogAreaFormEdit = true
    },
    handleTypeEdit() {
      const _selectData = this.$refs.multipleTable.selection
      const ids = _selectData.map((item, index) => {
        return item.CORPINFO_ID
      }).join(',')

      if (!ids) {
        this.$message({
          message: '请勾选要修改的企业',
          type: 'error'
        })
        return
      }
      this.editType = {
        smallList: this.smallList,
        small2List: []
      }
      this.typeForm = {
        SMALL_TYPE: '',
        SMALL_TYPE2: ''
      }
      this.CORPINFO_IDS = ids
      this.dialogTypeFormEdit = true
    },
    handleGridEdit() {
      const _selectData = this.$refs.multipleTable.selection
      const ids = _selectData.map((item, index) => {
        return item.CORPINFO_ID
      }).join(',')

      if (!ids) {
        this.$message({
          message: '请勾选要修改的企业',
          type: 'error'
        })
        return
      }

      if (!this.VILLAGE) {
        this.$message({
          message: '请选择您想修改网格员所在的乡镇/社区',
          type: 'error'
        })
        return
      }

      if (this.editGrid.userList.length < 1) {
        this.$message({
          message: '您选择的乡镇/社区无网格员用户',
          type: 'error'
        })
        return
      }
      this.gridForm = {
        USER_ID: ''
      }
      this.CORPINFO_IDS = ids
      this.dialogGridFormEdit = true
    },
    getQuery() {
      this.$refs.multipleTable.clearSelection()
      this.getList()
    },
    goKeyReset() {
      this.KEYWORDS = ''
      this.AUDITSTATUS = ''
      this.COUNTRY = ''
      this.VILLAGE = ''
      this.STREET = ''
      this.SMALL_TYPE = ''
      this.SMALL_TYPE2 = ''
      this.listQuery = {
        page: 1,
        limit: 10
      }
      this.getQuery()
    },
    goRecord(CORPINFO_ID) {
      this.$parent.CORPINFO_ID = CORPINFO_ID
      this.$parent.activeName = 'Info'
    },
    confirmArea() {
      this.$refs.areaForm.validate(valid => {
        if (valid) {
          requestFN(
            '/corpinfo/editAll',
            {
              EDIT_TYPE: 'area',
              CORPINFO_IDS: this.CORPINFO_IDS,
              COUNTRY: this.areaForm.COUNTRY,
              VILLAGE: this.areaForm.VILLAGE,
              STREET: this.areaForm.STREET
            }
          ).then((data) => {
            Message({
              message: '修改成功',
              type: 'success',
              duration: 5 * 1000
            })
            this.$refs.multipleTable.clearSelection()
            this.dialogAreaFormEdit = false
            this.goKeyReset()
          }).catch((e) => {
          })
        } else {
          return false
        }
      })
    },
    confirmType() {
      this.$refs.typeForm.validate(valid => {
        if (valid) {
          requestFN(
            '/corpinfo/editAll',
            {
              EDIT_TYPE: 'type',
              CORPINFO_IDS: this.CORPINFO_IDS,
              SMALL_TYPE: this.typeForm.SMALL_TYPE,
              SMALL_TYPE2: this.typeForm.SMALL_TYPE2
            }
          ).then((data) => {
            Message({
              message: '账号修改成功',
              type: 'success',
              duration: 5 * 1000
            })
            this.$refs.multipleTable.clearSelection()
            this.dialogTypeFormEdit = false
            this.goKeyReset()
          }).catch((e) => {
          })
        } else {
          return false
        }
      })
    },
    confirmGrid() {
      this.$refs.gridForm.validate(valid => {
        if (valid) {
          requestFN(
            '/corpinfo/editAll',
            {
              EDIT_TYPE: 'grid',
              CORPINFO_IDS: this.CORPINFO_IDS,
              GRID_MEMBER: this.gridForm.USER_ID
            }
          ).then((data) => {
            Message({
              message: '账号修改成功',
              type: 'success',
              duration: 5 * 1000
            })
            this.$refs.multipleTable.clearSelection()
            this.dialogGridFormEdit = false
            this.goKeyReset()
          }).catch((e) => {
          })
        } else {
          return false
        }
      })
    },
    getList() {
      return new Promise((resolve) => {
        this.listLoading = true
        requestFN(
          '/corpinfo/small/smallAuditlistPage?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
          {
            STATUS: 4,
            KEYWORDS: this.KEYWORDS,
            AUDITSTATUS: this.AUDITSTATUS,
            SMALL_TYPE: this.SMALL_TYPE,
            SMALL_TYPE2: this.SMALL_TYPE2,
            CITY: this.CITY,
            COUNTRY: this.COUNTRY,
            VILLAGE: this.VILLAGE,
            STREET: this.STREET
          }
        ).then((data) => {
          this.listLoading = false
          this.varList = data.varList
          this.total = data.page.totalResult
          this.CITY_CODE = data.CITY_CODE
          if (this.COUNTRY && this.VILLAGE) {
            requestFN(
              '/user/listAll',
              {
                COUNTRY: this.COUNTRY,
                VILLAGE: this.VILLAGE
              }
            ).then((data) => {
              this.editGrid.userList = data.userList
            }).catch((e) => {
            })
          } else {
            this.editGrid.userList = []
          }
          resolve()
        }).catch((e) => {
          this.listLoading = false
        })
      })
    },
    getCorpType() {
      requestFN(
        '/dictionaries/getLevels',
        {
          tm: new Date().getTime(),
          DICTIONARIES_ID: '5330766f60af4876b4a515935a0a85f6'
        }
      ).then((data) => {
        this.smallList = data.list
        this.editType.smallList = data.list
      })
        .catch((e) => {
          this.listLoading = false
        })
    },
    getCorpType2(pID) {
      this.SMALL_TYPE = pID
      requestFN(
        '/dictionaries/getLevels',
        {
          tm: new Date().getTime(),
          DICTIONARIES_ID: pID
        }
      ).then((data) => {
        this.small2List = data.list
      })
        .catch((e) => {
          this.listLoading = false
        })
    },
    getTypeCorpType2(pID) {
      this.typeForm.SMALL_TYPE2 = ''
      requestFN(
        '/dictionaries/getLevels',
        {
          tm: new Date().getTime(),
          DICTIONARIES_ID: pID
        }
      ).then((data) => {
        this.editType.small2List = data.list
      })
        .catch((e) => {
          this.listLoading = false
        })
    },
    getCountryList() {
      requestFN(
        '/dictionaries/getLevels',
        {
          DICTIONARIES_ID: this.CITY_CODE
        }
      ).then((data) => {
        this.countryList = data.list
        this.editArea.countryList = data.list
        this.editGrid.countryList = data.list
      }).catch((e) => {
      })
    },
    getVillageList(value, id) {
      this.COUNTRY = value
      requestFN(
        '/dictionaries/getLevels',
        {
          DICTIONARIES_ID: id
        }
      ).then((data) => {
        this.villageList = data.list
      }).catch((e) => {
      })
    },
    getStreetList(value, id) {
      this.VILLAGE = value
      requestFN(
        '/dictionaries/getLevels',
        {
          DICTIONARIES_ID: id
        }
      ).then((data) => {
        this.streetList = data.list
      }).catch((e) => {
      })

      requestFN(
        '/user/listAll',
        {
          COUNTRY: this.COUNTRY,
          VILLAGE: this.VILLAGE,
          ROLE_NAME: '网格员'
        }
      ).then((data) => {
        this.editGrid.userList = data.userList
      }).catch((e) => {
      })
    },
    changeVillage(village) {
      this.VILLAGE = village
    },
    getAreaVillageList(value, id) {
      this.areaForm.VILLAGE = ''
      this.areaForm.STREET = ''
      requestFN(
        '/dictionaries/getLevels',
        {
          DICTIONARIES_ID: id
        }
      ).then((data) => {
        this.editArea.villageList = data.list
      }).catch((e) => {
      })
    },
    getAreaStreetList(value, id) {
      this.areaForm.STREET = ''
      requestFN(
        '/dictionaries/getLevels',
        {
          DICTIONARIES_ID: id
        }
      ).then((data) => {
        this.editArea.streetList = data.list
      }).catch((e) => {
      })
    },
    getGridVillageList(value, id) {
      this.gridForm.VILLAGE = ''
      this.gridForm.USER_ID = ''
      requestFN(
        '/dictionaries/getLevels',
        {
          DICTIONARIES_ID: id
        }
      ).then((data) => {
        this.editGrid.villageList = data.list
      }).catch((e) => {
      })
    },
    getGridUserList(value, id) {
      this.gridForm.USER_ID = ''
      requestFN(
        '/user/listAll',
        {
          COUNTRY: this.gridForm.COUNTRY,
          VILLAGE: value
        }
      ).then((data) => {
        this.editGrid.userList = data.userList
      }).catch((e) => {
      })
    }
  }
}
</script>

