<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <el-input
          v-model="query.workName"
          clearable
          size="small"
          placeholder="输入作业名称"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-select
          v-model="query.station"
          filterable
          clearable
          size="small"
          placeholder="请选择场站"
          class="filter-item"
          style="width: 200px"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item of stationArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="query.type"
          filterable
          clearable
          size="small"
          placeholder="请选择作业性质"
          class="filter-item"
          style="width: 200px"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item of dict.dict['307']"
            :key="item.dictKey"
            :label="item.dictValue"
            :value="item.dictKey"
          />
        </el-select>
        <el-select
          v-model="query.status"
          filterable
          clearable
          size="small"
          placeholder="请选择作业状态"
          class="filter-item"
          style="width: 200px"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item of statusArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <rrOperation />
      </div>
      <crudOperation :permission="permission">
        <template slot="right">
          <el-button
            class="filter-item"
            size="mini"
            type="primary"
            icon="el-icon-connection"
            :disabled="crud.selections.length === 0"
            @click="handleFinish(crud.selections)"
          >
            完成
          </el-button>
        </template>
      </crudOperation>
    </div>
    <!--表单组件-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible="crud.status.cu > 0"
      :title="crud.status.title"
      top="8vh"
      width="1000px"
    >
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="110px" inline>
        <el-form-item label="所属单位" prop="belongDepartment">
          <el-input v-model="form.belongDepartment" style="width: 200px" />
        </el-form-item>
        <el-form-item label="作业计划类型" prop="planSourceType">
          <el-select
            v-model="form.planSourceType"
            filterable
            size="small"
            placeholder="请选择作业计划类型"
            class="filter-item"
            style="width: 200px"
          >
            <el-option
              v-for="item in dict.dict['307']"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="作业分级" prop="level">
          <el-select
            v-model="form.level"
            filterable
            size="small"
            placeholder="请选择作业分级"
            class="filter-item"
            style="width: 200px"
          >
            <el-option
              v-for="item in dict.dict['307']"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="作业性质" prop="type">
          <el-select
            v-model="form.type"
            filterable
            size="small"
            placeholder="请选择作业性质"
            class="filter-item"
            style="width: 200px"
          >
            <el-option
              v-for="item in dict.dict['307']"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="作业范围" prop="range">
          <el-select
            v-model="form.range"
            filterable
            size="small"
            placeholder="请选择作业范围"
            class="filter-item"
            style="width: 200px"
          >
            <el-option
              v-for="item in dict.dict['307']"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="管线" prop="pipeline">
          <el-input v-model="form.pipeline" style="width: 200px" />
        </el-form-item>
        <el-form-item label="开始场站" prop="startStation">
          <el-input v-model="form.startStation" style="width: 200px" />
        </el-form-item>
        <el-form-item label="中止场站" prop="endStation">
          <el-input v-model="form.endStation" style="width: 200px" />
        </el-form-item>
        <el-form-item label="场站" prop="station">
          <el-input v-model="form.station" style="width: 200px" />
        </el-form-item>
        <el-form-item label="阀室" prop="valveChamber">
          <el-input v-model="form.valveChamber" style="width: 200px" />
        </el-form-item>
        <el-form-item label="所属专业" prop="major">
          <el-select
            v-model="form.major"
            filterable
            size="small"
            placeholder="请选择所属专业"
            class="filter-item"
            style="width: 200px"
          >
            <el-option
              v-for="item in dict.dict['307']"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="作业名称" prop="workName">
          <el-input v-model="form.workName" style="width: 200px" />
        </el-form-item>
        <el-form-item label="作业负责人" prop="personName">
          <el-input v-model="form.personName" style="width: 200px" />
        </el-form-item>
        <el-form-item label="联系方式" prop="personPhone">
          <el-input v-model="form.personPhone" style="width: 200px" />
        </el-form-item>
        <el-form-item label="施工人数" prop="personCount">
          <el-input v-model="form.personCount" style="width: 200px" />
        </el-form-item>
        <el-form-item label="预计开始时间" prop="startTime">
          <el-date-picker
            v-model="form.startTime"
            type="datetime"
            placeholder="选择日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 200px"
            :picker-options="startDatePicker"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="预计结束时间" prop="endTime">
          <el-date-picker
            v-model="form.endTime"
            type="datetime"
            placeholder="选择日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 200px"
            :picker-options="endDatePicker"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="关联围栏" prop="railId">
          <el-select
            v-model="form.railId"
            filterable
            size="small"
            placeholder="请选择关联围栏"
            class="filter-item"
            style="width: 200px"
          >
            <el-option
              v-for="item in railArr"
              :key="item.id"
              :label="item.railName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="作业内容" prop="content">
          <el-input v-model="form.content" type="textarea" rows="3" style="width: 840px" />
        </el-form-item>
        <el-form-item label="操作影响" prop="influence">
          <el-input v-model="form.influence" type="textarea" rows="3" style="width: 840px" />
        </el-form-item>
        <el-form-item label="主要作业流程" prop="workPlow">
          <el-input v-model="form.workPlow" type="textarea" rows="3" style="width: 840px" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" rows="3" style="width: 840px" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      style="width: 100%"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="所属单位" prop="belongDepartment" align="center"> </el-table-column>
      <el-table-column label="作业分级" prop="level" align="center"> </el-table-column>
      <el-table-column label="作业性质" prop="type" align="center">
        <template slot-scope="{ row }">
          {{ dict.label['307'][row.type] }}
        </template>
      </el-table-column>
      <el-table-column label="作业范围" prop="range" align="center"> </el-table-column>
      <el-table-column label="场站" prop="station" align="center"> </el-table-column>
      <el-table-column label="阀室" prop="valveChamber" align="center"> </el-table-column>
      <el-table-column label="所属专业" prop="major" align="center"> </el-table-column>
      <el-table-column label="作业名称" prop="workName" align="center"> </el-table-column>
      <el-table-column label="作业负责人" prop="personName" align="center" width="100">
      </el-table-column>
      <el-table-column label="联系方式" prop="personPhone" align="center"> </el-table-column>
      <el-table-column
        label="预计开始时间"
        prop="startTime"
        align="center"
        :sortable="true"
        width="160"
      >
      </el-table-column>
      <el-table-column
        label="预计结束时间"
        prop="endTime"
        align="center"
        :sortable="true"
        width="160"
      >
      </el-table-column>
      <el-table-column label="作业区域" prop="railName" align="center"> </el-table-column>
      <el-table-column label="作业状态" prop="status" align="center">
        <template slot-scope="{ row }">
          {{ row.status == 1 ? '完成' : '未完成' }}
        </template>
      </el-table-column>
      <el-table-column label="超期" prop="overdue" align="center">
        <template slot-scope="{ row }">
          {{ row.overdue == true ? '是' : '否' }}
        </template>
      </el-table-column>
      <!--   编辑与删除   -->
      <el-table-column
        v-if="checkPer(['admin', 'workPlan:edit', 'workPlan:del'])"
        label="操作"
        width="170px"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <div style="display: flex">
            <el-button
              v-permission="['admin', 'workPlan:edit']"
              type="success"
              size="mini"
              @click="handleFinish(scope.row)"
              style="margin-right: 5px"
              icon="el-icon-s-claim"
              title="完成"
            >
            </el-button>
            <udOperation :data="scope.row" :permission="permission" />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import permission from '@/directive/permission'
import crudWorkPlan, { finishWork } from '@/api/work/workPlan'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
// import { crudOperation, rrOperation, udOperation, pagination } from '@crud'
import crudComps from '@crud'
import { initData } from '@/api/data'
const defaultForm = {
  id: '',
  belongDepartment: '',
  planSourceType: '',
  level: '',
  type: '',
  range: '',
  pipeline: '',
  startStation: '',
  endStation: '',
  station: '',
  valveChamber: '',
  major: '',
  workName: '',
  personName: '',
  personPhone: '', //作业内容
  personCount: '',
  startTime: '', // 作业开始时间
  endTime: '', // 作业结束时间
  influence: '',
  content: '', //作业类型
  workPlow: '', // 作业开始时间
  railId: '',
  remark: '', // 作业结束时间
}

export default {
  name: 'workPlan',
  directives: { permission },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  components: { ...crudComps },
  cruds() {
    return CRUD({
      title: '作业计划',
      url: 'work/workPlan/getList',
      listOrder: [],
      crudMethod: { ...crudWorkPlan },
      optShow: { add: true, edit: true, del: true, reset: true, import: true, export: true },
      queryOnPresenterCreated: true,
    })
  },
  dicts: ['307'],
  computed: {
    crudCU() {
      return this.crud.status.cu > 0
    },
  },
  data() {
    return {
      permission: {
        add: ['admin', 'workPlan:add'],
        edit: ['admin', 'workPlan:edit'],
        del: ['admin', 'workPlan:del'],
      },
      rules: {
        belongDepartment: [{ required: true, message: '请输入所属单位' }],
        planSourceType: [{ required: true, message: '请选择作业计划类型' }],
        level: [{ required: true, message: '请选择作业分级' }],
        range: [{ required: true, message: '请选择作业范围' }],
        // pipeline: [{ required: true, message: '请输入管线名称' }],
        // valveChamber: [{ required: true, message: '请输入阀室名称' }],
        // station: [{ required: true, message: '请输入场站' }],
        // startStation: [{ required: true, message: '请输入开始场站' }],
        // endStation: [{ required: true, message: '请输入结束场站' }],
        // major: [{ required: true, message: '请选择所属专业' }],
        // type: [{ required: true, message: '请选择作业性质' }],
        workName: [{ required: true, message: '请输入作业名称' }],
        // unit: [{ required: true, message: '请输入施工单位' }],
        startTime: [{ required: true, message: '请选择预计开始时间' }],
        endTime: [{ required: true, message: '请选择预计结束时间' }],
        personName: [{ required: true, message: '请输入负责人姓名' }],
        personPhone: [{ required: true, message: '请输入负责人电话' }],
        // personCount: [{ required: true, message: '请输入施工人数' }],
        // status: [{ required: true, message: '请选择作业状态' }],
        // railId: [{ required: true, message: '请选择关联围栏' }],
        content: [{ required: true, message: '请输入作业内容' }],
        // influence: [{ required: true, message: '请输入作业计划的操作影响' }],
        // workPlow: [{ required: true, message: '请输入作业计划的主要流程' }],
      },
      statusArr: [
        { label: '已完成', text: '已完成', value: '1' },
        { label: '未完成', text: '未完成', value: '0' },
      ],
      railArr: [],
      stationArr: [
        { label: '静海分输站', value: '静海分输站' },
        { label: '小卞庄分输站', value: '小卞庄分输站' },
        { label: '汪庄子分数站', value: '汪庄子分数站' },
        { label: '东河头分输站', value: '东河头分输站' },
      ],
      startDatePicker: {
        disabledDate: (time) => {
          // 既不能大于当前日期 由不能小于结束日期
          if (this.form.endTime) {
            return time.getTime() < new Date(this.form.endTime).getTime()
          }
          return time.getTime() < new Date() - 8.64e7
          // - 8.64e7减去了当天，即可选择当天
        },
      },
      endDatePicker: {
        disabledDate: (time) => {
          // 既不能大于当前日期 由不能大于开始日期
          if (this.form.startTime) {
            return time.getTime() < new Date(this.form.startTime).getTime()
          }
          return time.getTime() < new Date() - 8.64e7
          // 如果想实现结束时间可以在开始时间当天内的话 可以减掉86400000秒，相当于一天。
          // return time.getTime() < new Date(this.params.actStartTime).getTime() - 86400000;
        },
      },
    }
  },
  created() {
    this.getRailData()
    console.log(this.dict)
  },
  methods: {
    [CRUD.HOOK.afterRefresh]() {
      // const mockData = Array.from({ length: 5 }, (t, i) => {
      //   let sort = i + 1
      //   return {
      //     id: sort + '',
      //     content: `作业-${sort}`, //作业内容
      //     unit: sort, //作业编号
      //     type: sort, //作业类型
      //     startTime: '2023-02-14 16:29:12', // 作业更新时间
      //     endTime: '2023-02-14 16:29:12', // 作业更新时间
      //     personName: '张三',
      //     personPhone: '15012345678',
      //     personCount: '3',
      //     status: '1', // 作业状态
      //     remark: `备注-${sort}`, //作业内容
      //   }
      // })
      // this.crud.data = mockData
      // this.crud.resetDataStatus()
    },
    beforeUpload(file, type) {
      if (file.size > 1024 * 1024 * 1024 * 2) {
        this.$message.warning('文件最大限制为 2MB')
        return false
      }

      let fileName = file.name
      let fileExtension = fileName.substring(fileName.lastIndexOf('.')).toLowerCase()
      let allowExtension = ['.xls', '.xlsx']
      if (allowExtension.indexOf(fileExtension) == -1) {
        ys.msgError('只有文件扩展名是 ' + allowExtension.join('/') + ' 的文件才能上传')
        return false
      }
    },
    // 打开
    [CRUD.HOOK.beforeToEdit]() {},
    async getRailData() {
      try {
        const res = await initData('positioning/rail/getPageListJson', {})
        this.railArr = res.data.content || []
      } catch (error) {
        console.log(error)
      }
    },

    async handleFinish(data) {
      let ids = []
      if (Array.isArray(data)) {
        ids = data.map((d) => d.id)
      } else {
        ids = [data.id]
      }
      this.$confirm('确定完成所选工作计划?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          try {
            const { code, msg } = await finishWork(ids)
            this.$message({
              type: code == 20000 ? 'success' : 'danger',
              message: msg,
            })
            this.crud.toQuery()
          } catch (error) {
            console.log(error)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
}
</script>

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