<template>
  <div>
    <div class="search-term">
      <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
        <el-form-item label="站点类型">
          <el-select v-model="searchInfo.type" clearable placeholder="请选择">
            <el-option
              v-for="dict in dict.type.site_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-search"
            @click="onSubmit"
          >查询</el-button>
          <!--          <el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog">新增</el-button>-->
          <el-popover
            v-model:visible="deleteVisible"
            placement="top"
            width="160"
          >
            <p>确定要删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button
                size="mini"
                type="text"
                @click="deleteVisible = false"
              >取消</el-button>
              <el-button
                size="mini"
                type="primary"
                @click="onDelete"
              >确定</el-button>
            </div>
          </el-popover>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="multipleTable"
      border
      stripe
      style="width: 100%"
      tooltip-effect="dark"
      :data="tableData"
      @selection-change="handleSelectionChange"
    >
      <!--      <el-table-column type="selection" width="55"/>-->
      <el-table-column label="创建时间" width="180">
        <template #default="scope">{{
          formatDate(scope.row.CreatedAt)
        }}</template>
      </el-table-column>
      <el-table-column label="站点名称" prop="name" />
      <el-table-column label="站点满分值" prop="unitMaxIntegral">
        <template #default="scope">{{ scope.row.unitMaxIntegral/100 }}</template>
      </el-table-column>
      <el-table-column label="站点扣分" prop="unitIntegral">
        <template #default="scope">{{ scope.row.unitIntegral/100 }}</template>
      </el-table-column>
      <el-table-column label="站点定位" prop="position" width="150">
        <template #default="scope">
          <el-link
            :underline="false"
            type="primary"
            @click.native="
              openMapHandle(
                scope.row.position,
                scope.row.name,
                dict.label.site_type[scope.row.type]
              )
            "
          >
            点击查看地图
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="站点类型" prop="type">
        <template #default="scope">
          <dict-tag :options="dict.type.site_type" :value="scope.row.type" />
        </template>
      </el-table-column>
      <el-table-column label="区域" width="140">
        <template #default="scope">
          <div>{{ scope.row.organName }}</div>
        </template>
      </el-table-column>

      <el-table-column label="地址" prop="region" />
      <el-table-column label="操作" width="220">
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-edit"
            class="table-button"
            @click="updatePlace(scope.row)"
          >变更
          </el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteRow(scope.row)"
          >删除</el-button>
          <el-button
            type="info"
            class="mt10 ml0"
            icon="el-icon-circle-plus-outline"
            size="mini"
            @click="addProblem(scope.row)"
          >添加问题</el-button>
          <el-button
            type="success"
            icon="el-icon-tickets"
            size="mini"
            @click="ProblemList(scope.row)"
          >问题管理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :current-page="page"
      :page-size="pageSize"
      :page-sizes="[10, 30, 50, 100]"
      :style="{ float: 'right', padding: '20px' }"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <el-dialog
      v-model="dialogFormVisible"
      :before-close="closeDialog"
      title="弹窗操作"
    >
      <el-form :model="formData" label-position="right" label-width="80px">
        <el-form-item label="点位名称:">
          <el-input v-model="formData.name" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="点位定位:">
          <el-input v-model="formData.position" :disabled="type != 'create'" />
        </el-form-item>
        <el-form-item label="点位类型:">
          <el-select v-model="formData.type">
            <el-option
              v-for="dict in dict.type.site_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="满分值:">
          <el-input v-model="formData.unitMaxIntegral" />
        </el-form-item>
        <el-form-item label="地址:">
          <el-input v-model="formData.region" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="区域:">
          <el-cascader
            v-model="formData.organCode"
            :options="optionsArea"
            :show-all-levels="false"
            :props="{ expandTrigger: 'hover', value: 'code', label: 'name' }"

            @change="changeArea"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="enterDialog">确 定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 问题管理开始 -->
    <el-dialog v-model="dialogProblemVisible" title="弹窗操作">
      <el-table :data="problemData" border>
        <el-table-column prop="placeProText" label="问题名称" />
        <el-table-column label="操作" width="160">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-edit"
              class="table-button"
              @click="updateProblem(scope.row)"
            >变更
            </el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deleteProblem(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 问题管理结束 -->
  </div>
</template>

<script>
import {
  createPlace,
  deletePlace,
  deletePlaceByIds,
  updatePlace,
  findPlace,
  getPlaceList,
} from '@/api/place' //  此处请自行替换地址
import {
  createPlacePro,
  deletePlacePro,
  updatePlacePro
} from '@/api/placePro' //  此处请自行替换地址

import { areaList } from '@/api/organization'
import infoList from '@/mixins/infoList'
import { getDict } from '@/utils/dictionary'

export default {
  name: 'Place',
  dicts: ['site_type'],
  mixins: [infoList],
  data() {
    return {
      currentID: 0, // 当前问题ID

      listApi: getPlaceList,
      dialogFormVisible: false,
      dialogProblemVisible: false,
      problemData: [], // 问题列表
      type: '',
      siteType: [],
      deleteVisible: false,
      multipleSelection: [],
      formData: {
        name: '',
        position: '',
        type: '',
        region: '',
        organCode: ''
      },
      formDataProblem: {
        placeId: 0,
        placeProText: '',
      },
      optionsArea: []
    }
  },
  async created() {
    this.siteType = await getDict('site_type')
    await this.getTableData()
  },
  methods: {
    openMapHandle(position, name, region) {
      window.open(
        'https://apis.map.qq.com/uri/v1/marker?marker=coord:' +
          position +
          ';title:' +
          name +
          ';addr:' +
          region
      )
    },
    // 条件搜索前端看此方法
    onSubmit() {
      this.page = 1
      this.pageSize = 10
      this.getTableData()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteRow(row) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.deletePlace(row)
      })
    },
    async onDelete() {
      const ids = []
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择要删除的数据',
        })
        return
      }
      this.multipleSelection &&
        this.multipleSelection.map((item) => {
          ids.push(item.ID)
        })
      const res = await deletePlaceByIds({ ids })
      if (res.code === 0) {
        this.$message({
          type: 'success',
          message: '删除成功',
        })
        if (this.tableData.length === ids.length && this.page > 1) {
          this.page--
        }
        this.deleteVisible = false
        this.getTableData()
      }
    },
    async updatePlace(row) {
      const res = await findPlace({ ID: row.ID })
      this.type = 'update'
      if (res.code === 0) {
        this.formData = res.data.replace
        this.formData.unitMaxIntegral = this.formData.unitMaxIntegral / 100
        this.dialogFormVisible = true
      }

      const list = await areaList({ code: '1307' })
      console.log(list)
      if (list.code == 0) {
        this.optionsArea = list.data.treeMap
      }
      // console.log(this.optionsArea)
    },
    closeDialog() {
      this.dialogFormVisible = false
      this.formData = {
        name: '',
        position: '',
        type: '',
        region: '',
      }
    },
    async deletePlace(row) {
      const res = await deletePlace({ ID: row.ID })
      if (res.code === 0) {
        this.$message({
          type: 'success',
          message: '删除成功',
        })
        if (this.tableData.length === 1 && this.page > 1) {
          this.page--
        }
        this.getTableData()
      }
    },
    async enterDialog() {
      let res
      switch (this.type) {
        case 'create':
          res = await createPlace(this.formData)
          break
        case 'update':
          this.formData.unitMaxIntegral = parseInt(this.formData.unitMaxIntegral)
          res = await updatePlace(this.formData)
          break
        default:
          res = await createPlace(this.formData)
          break
      }
      if (res.code === 0) {
        this.$message({
          type: 'success',
          message: '创建/更改成功',
        })
        this.closeDialog()
        this.getTableData()
      }
    },
    openDialog() {
      this.type = 'create'
      this.dialogFormVisible = true
    },
    // 添加问题
    addProblem(row) {
      this.$prompt('请输入站点问题', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',

      })
        .then(({ value }) => {
          if (value == '' || value == null) {
            this.$message({
              type: 'error',
              message: '你的问题不能为空',
            })
          } else {
            this.formDataProblem.placeId = row.ID
            this.formDataProblem.placeProText = value
            // console.log(this.formDataProblem)
            createPlacePro(this.formDataProblem).then((res) => {
              this.$message({
                type: 'success',
                message: res.msg,
              })
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入',
          })
        })
    },

    // 问题管理
    async ProblemList(row) {
      // console.log(row)
      this.dialogProblemVisible = true
      this.currentID = this.currentID == 0 ? row.ID : this.currentID
      const res = await findPlace({ ID: this.currentID })
      if (res.code == 0) {
        this.problemData = res.data.replace.proList
      }
    },

    // 修改更新问题
    async updateProblem(row) {
      console.log(row)
      this.$prompt('请修改站点问题', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: row.placeProText
      }).then(async(value) => {
        console.log(value)
        if (value == '' || value == null) {
          this.$message({
            type: 'error',
            message: '你的问题不能为空',
          })
        } else {
          this.formDataProblem.ID = row.ID
          this.formDataProblem.placeId = row.placeId
          this.formDataProblem.placeProText = value.value
          // console.log(this.formDataProblem)

          // console.log(this.formDataProblem)
          const res = await updatePlacePro(this.formDataProblem)
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: res.msg,
            })
            this.ProblemList()
          }
        }
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入',
          })
        })
    },

    // 删除问题
    async deleteProblem(row) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async() => {
        const res = await deletePlacePro({ ID: row.ID })

        if (res.code === 0) {
          this.$message({
            type: 'success',
            message: '删除成功',
          })
          this.ProblemList()
        }
      })
    },

    // 区域更改
    changeArea(value) {
      console.log(value[0])
      this.formData.organCode = value[0]
    }
  },
}
</script>

<style>
</style>
