<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input
          v-model="query.tag"
          clearable
          size="small"
          placeholder="请输入标签名"
          style="width: 170px"
          class="filter-item"
          @keyup.enter.native="handleToQuery"
        />
        <el-input
          v-model="query.description"
          clearable
          size="small"
          placeholder="请输入标签描述"
          style="width: 170px"
          class="filter-item"
          @keyup.enter.native="handleToQuery"
        />
        <el-select
          v-model="query.connId"
          clearable
          size="small"
          placeholder="所属连接"
          class="filter-item"
          style="width: 120px"
          @change="handleConnChange"
        >
          <el-option
            v-for="item in optionsObj.Conn"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="query.deviceId"
          clearable
          size="small"
          placeholder="所属设备"
          class="filter-item"
          style="width: 120px"
          @change="handleToQuery"
        >
          <el-option
            v-for="item in deviceOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="query.dataType"
          clearable
          size="small"
          placeholder="数据类型"
          class="filter-item"
          style="width: 120px"
          @change="handleToQuery"
        >
          <el-option
            v-for="item in optionsObj.DataType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="query.enable"
          clearable
          size="small"
          placeholder="状态"
          class="filter-item"
          style="width: 120px"
          @change="handleToQuery"
        >
          <el-option
            v-for="item in statusOpt"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <span
          ><el-button
            class="filter-item"
            size="mini"
            type="success"
            icon="el-icon-search"
            @click="handleToQuery"
            >搜索</el-button
          ></span
        >
      </div>
      <crudOperation :permission="permission" />
    </div>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        v-for="item in dataManagerTableOptions"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
        :width="item.width"
        :align="item.align"
        :fixed="item.fixed"
        :sortable="item.sortable"
        show-overflow-tooltip
      >
      </el-table-column>
    </el-table>
    <pagination />
  </div>
</template>

<script>
import permission from '@/directive/permission'
import crudDataManager from '@/api/dataComm/dataManager'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
// import { crudOperation, rrOperation, udOperation, pagination } from '@crud'
import crudComps from '@crud'
import { getOptions } from '@/api/dataComm/options'

// 表头配置
import { dataManagerTableOptions } from '../../tableConfig'

const defaultForm = {}

export default {
  name: 'ForwardingTagSelectTag',
  directives: { permission },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  components: { ...crudComps },
  cruds() {
    return CRUD({
      title: '标签选择',
      url: 'dataCommunicationManage/generalTag/getList',
      //params: { connEnable: true, deviceEnable: true, enable: true },
      crudMethod: { ...crudDataManager },
      optShow: {
        add: false,
        edit: false,
        del: false,
        reset: false,
        import: false,
        export: false,
      },
    })
  },
  props:{
    crudcu: {
      type: Boolean,
      require: true,
    },
  },
  watch:{
    crudcu(newValue, oldValue) {
      if (!oldValue && newValue){
        this.query = {}
        this.$refs.table.clearSelection()
      }
    }
  },
  data() {
    return {
      dataManagerTableOptions,
      rules: {
        dataManagerName: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur',
          },
        ],
      },
      permission: {
        add: ['admin', 'datacommunicationmanage:generaltag:add'],
        edit: ['admin', 'datacommunicationmanage:generaltag:edit'],
        del: ['admin', 'datacommunicationmanage:generaltag:del'],
      },
      optionsObj: {
        DataType: [],
        Conn: [],
      },
      statusOpt: [
        { label: '启用', value: true },
        { label: '禁用', value: false },
      ],
      mqttClient: null,
      topicArray: [],
      currData: {},
      deviceOptions: [],
    }
  },
  computed: {
    VUE_APP_BASE_API() {
      return process.env.VUE_APP_BASE_API
    },
  },
  created() {
    this.getOptions()
  },
  mounted() {},
  methods: {
    handleToQuery() {
      this.crud.toQuery()
      this.$emit('update:query', this.query)
    },
    handleSelectionChange(value){
      this.$emit('update:selection', value.map(a => a.id))
    },
    handleConnChange(value) {
      getOptions('Device', { id: value }).then((res) => {
        if (res.code === 20000) {
          this.query.deviceId = null
          this.deviceOptions = res.data.content
          this.handleToQuery()
        }
      })
    },
    getOptions() {
      Object.keys(this.optionsObj).forEach(async (key) => {
        try {
          let res = await getOptions(key)
          if (res.code === 20000) this.optionsObj[key] = res.data.content
        } catch (error) {
          console.log(error)
        }
      })
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .vue-treeselect__control,
::v-deep .vue-treeselect__placeholder,
::v-deep .vue-treeselect__single-value {
  height: 30px;
  line-height: 30px;
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
</style>
