<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <el-date-picker
          class="filter-item"
          size="mini"
          v-model="query.date"
          type="date"
          placeholder="选择日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <rrOperation />
      </div>
      <cruOperation :permission="permission">
        <template slot="right">
          <el-button
            class="filter-item"
            size="mini"
            type="success"
            icon="el-icon-plus"
            @click="handleAdd"
          >
            新增
          </el-button>
          <el-button
            class="filter-item"
            size="mini"
            type="primary"
            icon="el-icon-s-promotion"
            @click="handleSubmit"
          >
            提交
          </el-button>
        </template>
      </cruOperation>
    </div>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      style="width: 100%"
      :cell-class-name="cellClassName"
      @cell-click="handleCellClick"
    >
      <el-table-column label="操作\区域" prop="type" align="center">
        <template slot-scope="scope">
          <el-input
            :id="'input_' + scope.$index"
            v-if="scope.row.typeIsEdit"
            class="item"
            v-model="scope.row.type"
            placeholder="请输入内容"
            size="mini"
            @blur="scope.row.typeIsEdit = false"
          ></el-input>
          <div v-else class="txt">{{ scope.row.type }}</div>
        </template>
      </el-table-column>
      <el-table-column
        v-for="s of stations"
        :label="s.label"
        :prop="s.prop"
        :key="s.prop"
        align="center"
      >
        <template slot-scope="scope">
          <i v-if="scope.row[s.prop] == '1'" class="table-icon el-icon-close"></i>
          <div v-else-if="scope.row[s.prop] == '/'" class="txt">{{ scope.row[s.prop] }}</div>
          <div v-else class="txt"></div>
        </template>
      </el-table-column>
      <!--   编辑与删除   -->
      <el-table-column
        v-if="checkPer(['admin', 'bannedToday:edit', 'bannedToday:del'])"
        label="操作"
        width="80px"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="handleDel(scope.$index)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <!-- <pagination /> -->
  </div>
</template>

<script>
import permission from '@/directive/permission'
import { add } from '@/api/work/bannedToday'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
// import { crudOperation, rrOperation, udOperation, pagination } from '@crud'
import crudComps from '@crud'
import Dayjs from 'dayjs'

export default {
  name: 'bannedToday',
  directives: { permission },
  mixins: [presenter(), header(), crud()],
  components: { ...crudComps },
  cruds() {
    return CRUD({
      title: '今日禁止',
      url: 'work/forbidden/getList',
      listOrder: [],
      optShow: {
        add: false,
        edit: false,
        del: false,
        reset: true,
      },
      query: {
        date: Dayjs(new Date()).format('YYYY-MM-DD'),
      },
      queryOnPresenterCreated: true,
    })
  },
  computed: {
    crudCU() {
      return this.crud.status.cu > 0
    },
  },
  data() {
    return {
      permission: {
        add: ['admin', 'bannedToday:add'],
        edit: ['admin', 'bannedToday:edit'],
        del: ['admin', 'bannedToday:del'],
      },
      rules: {
        content: [{ required: true, message: '请输入作业内容', trigger: 'blur' }],
        type: [{ required: true, message: '请选择作业类型', trigger: 'blur' }],
      },
      options: {
        typeArr: [
          { label: '总部', text: '总部', value: '1' },
          { label: '合资公司', text: '合资公司', value: '2' },
          { label: '管理处', text: '管理处', value: '3' },
          { label: '维抢修中心', text: '维抢修中心', value: '4' },
        ],
        statusArr: [
          { label: '已完成', text: '已完成', value: '1' },
          { label: '未完成', text: '未完成', value: '0' },
        ],
      },
      stations: [
        { label: '静海', prop: 's1' },
        { label: '小卞庄', prop: 's2' },
        { label: '汪庄子', prop: 's3' },
        { label: '东河头', prop: 's4' },
        { label: '里澜城', prop: 's5' },
        { label: '安次', prop: 's6' },
        { label: '杨芬港1#', prop: 's7' },
        { label: '杨芬港2#', prop: 's8' },
        { label: '港三3#', prop: 's9' },
        { label: '港三4#', prop: 's10' },
        { label: '线路段', prop: 's11' },
      ],
    }
  },
  methods: {
    [CRUD.HOOK.afterRefresh]() {
      if (!this.crud.data?.length) {
        const defaultData = ['防空', '排污', '送电', '人员进入'].map((t, i) => {
          return {
            type: t,
            s1: '0',
            s2: '0',
            s3: '0',
            s4: '0',
            s5: '0',
            s6: '0',
            s7: '0',
            s8: '0',
            s9: '0',
            s10: '0',
            s11: ['防空', '排污', '送电'].includes(t) ? '/' : '0',
          }
        })
        this.crud.data = defaultData
      }
      this.crud.resetDataStatus()
    },
    // 打开
    [CRUD.HOOK.beforeToEdit]() {},
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] == value
    },
    handleAdd() {
      this.crud.data.push({
        type: '',
        s1: '0',
        s2: '0',
        s3: '0',
        s4: '0',
        s5: '0',
        s6: '0',
        s7: '0',
        s8: '0',
        s9: '0',
        s10: '0',
        s11: '0',
      })
    },
    handleSubmit() {
      const { date } = this.query
      this.$confirm(`是否提交【${date}】工作计划禁止数据？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          try {
            await add({ date, list: [...this.crud.data] })
          } catch (err) {
            console.log(err)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    handleDel(index) {
      this.$confirm('是否删除本条数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.crud.data.splice(index, 1)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    handleCellClick(row, column, cell, event) {
      const property = column.property
      if (!property) return
      if (property === 'type') {
        // 保存cell
        this.$set(row, 'typeIsEdit', true)
        this.$nextTick(() => {
          // console.log(this.$refs['input' + row.index])
          document.getElementById(`input_${row.index}`).focus()
        })
      } else if (property.startsWith('s')) {
        console.log(row[property])
        if (row[property] == '1') {
          this.$set(row, property, '0')
        } else if (row[property] == '0') {
          this.$set(row, property, '1')
        } else if (row[property] == '/') {
          return
        }
      }
    },
    cellClassName({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex
      column.index = columnIndex
    },
  },
}
</script>

<style lang="scss" scoped>
.table-opt-box {
  display: flex;
  justify-content: center;
  .slot-btn {
    .el-button {
      margin-left: 0;
      margin-right: 8px;
    }
  }
}
.table-icon {
  font-size: 16px;
  font-weight: 600;
}
</style>
