<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="add"
          v-auth="'operation.create'"
        ></el-button>
		<el-select
        v-model="query.state"
        placeholder="作业状态"
        @change="handleQuery"
        style="margin-left: 2px"
        clearable
      >
        <el-option
          v-for="item in stateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-date-picker
        v-model="timeRange"
        type="datetimerange"
        range-separator="至"
        start-placeholder="作业开始时间始"
        end-placeholder="作业开始时间止"
        style="margin-left: 2px"
        value-format="YYYY-MM-DD HH:mm:ss"
        @change="handleQuery"
        clearable
      />
      </div>
      <div class="right-panel">
        <el-select @change="handleFilterTypeChange" v-model="filterType">
          <el-option
            v-for="item in filterOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input
          v-model="query.search"
          placeholder="名称"
          clearable
          @keyup.enter="handleQuery"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleQuery"
        ></el-button>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable
        ref="tableoperation"
        :apiObj="apiObj"
        row-key="id"
        @selection-change="selectionChange"
        stripe
        @resetQuery="resetQuery"
      >
        <!-- <el-table-column
					label="#"
					type="index"
					width="50"
				></el-table-column> -->
        <el-table-column label="许可证" prop="opls" width="200" :show-overflow-tooltip="true" fixed="left">
          <template #default="scope">
            <el-tag
              v-for="item in scope.row.cates_"
              :key="item.id"
              style="margin-right: 2px"
              >{{ item.name }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="作业简介"
          prop="name"
          width="200"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="作业状态" prop="state">
          <template #default="scope">{{
            stateoptions[scope.row.state]
          }}</template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_time" width="150"></el-table-column>
        <el-table-column label="作业区域" width="100"
          ><template #default="scope">
            {{ scope.row.area_.name }}
          </template>
        </el-table-column>
        <el-table-column label="预计开始" prop="start_time" width="150"></el-table-column>
        <el-table-column label="预计结束" prop="end_time"  width="150"></el-table-column>
        <el-table-column label="属地部门" prop="dept_ter" width="100"
          ><template #default="scope">
            {{ scope.row.dept_ter_.name }}
          </template></el-table-column
        >
        <el-table-column label="业务部门" prop="dept_bus" width="100"
          ><template #default="scope">
            {{ scope.row.dept_bus_.name }}
          </template></el-table-column
        >
        <el-table-column label="创建人" prop="create_by"
          ><template #default="scope">
            {{ scope.row.create_by_.name }}
          </template></el-table-column
        >
        <el-table-column label="操作" fixed="right" align="left" width="180">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              v-auth="'operation.update'"
              @click="creatopl(scope.row)"
              >许可证
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click="table_show(scope.row, scope.$index)"
              >查看
            </el-button>
            <el-button
              v-if="scope.row.state === 10"
              link
              type="warning"
              size="small"
              v-auth="'operation.update'"
              @click="table_edit(scope.row, scope.$index)"
              >编辑
            </el-button>
            <el-button
              link
              type="danger"
              size="small"
              v-if="scope.row.state === 10"
              v-auth="'operation.delete'"
              @click="table_del(scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
    <save-dialog
      v-if="dialog.save"
      ref="saveDialog"
      @success="handleSaveSuccess"
      @closed="dialog.save = false"
    >
    </save-dialog>
  </el-container>
</template>
<script>
import saveDialog from "./operation_form.vue";

export default {
  name: "operation",
  components: {
    saveDialog,
  },
  data() {
    return {
      dialog: {
        save: false,
        permission: false,
      },
      apiObj: this.$API.opm.operation.list,
      query: {},
      filterType: "all",
      filterOptions: [
        {
          label: "全部",
          value: "all",
        },
        {
          label: "我创建的",
          value: "my",
        },
      ],
      timeRange: [],
      stateOptions: [
        {
          label: "创建中",
          value: 10,
        },
        {
          label: "审批中",
          value: 20,
        },
        {
          label: "待作业",
          value: 30,
        },
        {
          label: "进行中",
          value: 40,
        },
        {
          label: "已结束",
          value: 50,
        },
      ],
      selection: [],
      search: {
        keyword: null,
      },
      stateoptions: {
        10: "创建中",
        20: "审批中",
        30: "待作业",
        40: "作业中",
        50: "已结束",
      },
      userId: "",
    };
  },
  mounted() {
    let userInfo = this.$TOOL.data.get("USER_INFO");
    this.userId = userInfo.id;
  },
  methods: {
    //添加
    add() {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open("add");
      });
    },

    //编辑
    table_edit(row) {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open("edit").setData(row);
      });
    },
    //查看
    table_show(row) {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open("show").setData(row);
      });
    },
    //创建作业许可证
    creatopl(row) {
      this.$router.push({
        name: "opl",
        query: {
          id: row.id,
        },
      });
    },
    //权限设置
    permission() {
      this.dialog.permission = true;
      this.$nextTick(() => {
        this.$refs.permissionDialog.open();
      });
    },

    //删除
    table_del(row) {
      this.$API.opm.operation.delete
        .req(row.id)
        .then((res) => {
          this.$message.success("删除成功");
          this.$refs.tableoperation.refresh();
          return res;
        })
        .catch((err) => {
          return err;
        });
    },

    //表格选择后回调事件
    selectionChange(selection) {
      this.selection = selection;
    },
    //表格内开关
    changeSwitch(val, row) {
      row.status = row.status == "1" ? "0" : "1";
      row.$switch_status = true;
      setTimeout(() => {
        delete row.$switch_status;
        row.status = val;
        this.$message.success("操作成功");
      }, 500);
    },
    //搜索
    handleQuery() {
      let obj = {};
      if (this.timeRange) {
        this.query.start_create = this.timeRange[0];
        this.query.end_create = this.timeRange[1];
      } else {
        this.query.end_create = null;
        this.query.start_create = null;
      }
      if (this.query.cates) {
      } else {
        this.query.cates = null;
      }
      this.$refs.tableoperation.queryData(this.query);
    },
    handleFilterTypeChange(val) {
      if (val == "all") {
        this.query.create_by = null;
      } else if (val == "my") {
        this.query.create_by = this.userId;
      }
      this.$refs.tableoperation.queryData(this.query);
    },
    //根据ID获取树结构
    filterTree(id) {
      var target = null;
      function filter(tree) {
        tree.forEach((item) => {
          if (item.id == id) {
            target = item;
          }
          if (item.children) {
            filter(item.children);
          }
        });
      }

      filter(this.$refs.tableoperation.tableData);
      return target;
    },
    //本地更新数据
    handleSaveSuccess(data, mode) {
      if (mode == "add") {
        this.$refs.tableoperation.refresh();
      } else if (mode == "edit") {
        this.$refs.tableoperation.refresh();
      }
    },
    resetQuery() {
      this.query = {};
    },
  },
};
</script>
