<template>
  <div>
    <el-dialog
      title="关联病害信息"
      :visible.sync="dialogVisible"
      width="900px"
      appendToBody
      :close-on-click-modal="false"
      top="5vh"
      @close="closeDialog"
      v-if="dialogVisible"
      append-to-body
    >
      <el-container>
        <el-main style="padding: 10px; height: 400px">
          <ht-table
            @load="loadData"
            :data="data"
            :selectable="false"
            :highlightCurrentRow="true"
            :page-result="pageBean"
            quick-search-props="name,key"
            ref="htTable"
            :show-export="false"
            :show-custom-column="false"
            @row-click="rowClick"
            :default-querys="[{property:'handlingSituation',value:0}]"
          >
            <template v-slot:toolbar>
              <el-tooltip
                effect="dark"
                content="鼠标覆盖一条数据点击进行选取"
                placement="right"
              >
                <el-tag type="info">
                  <span class="el-icon-question"> 提示 </span>
                </el-tag>
              </el-tooltip>
            </template>
            <template>
              <el-table-column
                type="selection"
                align="center"
                width="45"
                v-if="!this.single"
              ></el-table-column>
              <el-table-column
                align="center"
                width="50"
                v-if="this.single"
              >
                <template slot-scope="scope">
                  <el-radio
                    v-model="selectedId"
                    :label="scope.row.id"
                  ></el-radio>
                </template>
              </el-table-column>
              <ht-table-column
                prop="subjectName"
                label="病害类别"
                :sortable="true"
                :show-overflow-tooltip="true"
              >
              </ht-table-column>
              <ht-table-column
                prop="dsubjectName"
                label="病害细目"
                :sortable="true"
                :show-overflow-tooltip="true"
              >
              </ht-table-column>
              <ht-table-column
                prop="roadName"
                label="路段名称"
                :sortable="true"
                :show-overflow-tooltip="true"
              >
              </ht-table-column>
              <ht-table-column
                prop="type"
                label="检查类别"
                :filters="getDictData('xjlb')"
                :show-overflow-tooltip="true"
              >
                <template v-slot="{row}">
                  <el-tag>{{ getDictName('xjlb', row.direction) }}</el-tag>
                </template>
              </ht-table-column>

              <ht-table-column
                prop="direction"
                label="方向"
                :filters="getDictData('qlfx')"
                :show-overflow-tooltip="true"
              >
                <template v-slot="{row}">
                  <el-tag>{{ getDictName('qlfx', row.direction) }}</el-tag>
                </template>
              </ht-table-column>

              <ht-table-column
                prop="position"
                label="病害部位"
                :sortable="true"
                :show-overflow-tooltip="true"
              >
              </ht-table-column>
              <ht-table-column
                prop="description"
                label="病害描述"
                :sortable="true"
                :show-overflow-tooltip="true"
              >
              </ht-table-column>
              <ht-table-column
                prop="handlingSituation"
                label="处理情况"
                :sortable="true"
                :show-overflow-tooltip="true"
              >
              </ht-table-column>
            </template>
          </ht-table>
        </el-main>
      </el-container>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="handleOK"
          size="medium"
        >确 定</el-button>
        <el-button
          @click="closeDialog"
          size="medium"
        >取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import req from '@/request.js'
import basicData from '@/api/basicData.js'
import utils from '@/hotent-ui-util.js'
export default {
  components: {},
  props: {
    single: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      pageBean: {
        page: 1,
        pageSize: 20,
        total: 0
      },
      data: [],
      activeRow: {},
      selectedId: null
    }
  },
  methods: {
    rowClick(row) {
      this.activeRow = row
      this.selectedId = row.id
    },
    open() {
      this.dialogVisible = true
    },
    handleOK() {
      let selectRow = utils.deepClone(this.activeRow)
      console.log(selectRow)
      if (selectRow == {}) {
        console.log('空的')
      } else {
        this.$emit('select', selectRow)
      }
      this.selectedId = null
      this.dialogVisible = false
      this.activeRow = {}
    },
    loadData(param, cb) {
      this.exportQuery = param
      this.$http
        .post('${form}/disease/v1/getJson', param)
        .then(
          resp => {
            let res = resp.data.rows
            let arr = []
            res.filter(item => {
              if (item.temporary == 0) {
                arr = arr.concat(item)
              }
            })
            this.data = arr
            this.pageBean = {
              page: resp.data.page,
              pageSize: resp.data.pageSize,
              total: arr.length
            }
          },
          error => {
            reject(error)
          }
        )
        .finally(() => {
          if (cb) {
            cb()
          }
        })
    },
    closeDialog() {
      this.dialogVisible = false
      this.activeRow = {}
    }
  }
}
</script>

<style lang="scss" scoped>
>>> .el-dialog__body {
  padding-bottom: 0px !important;
}

::v-deep .el-dialog__header {
  border-bottom: 1px solid #ebeef5;
}
</style>
