<template>
  <div class="app-container">
    <el-card>
      <el-input
        v-model="pageForm.search"
        placeholder="任务名"
        style="width: 300px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button
      >
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-refresh-left"
        @click="resetFilter"
      >重置</el-button
      >
      <div style="margin-top: 10px">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
        >
          新增资质报送任务
        </el-button>
      </div>

    </el-card>
    <el-card style="margin-top: 10px">
      <el-table
        v-loading="listLoading"
        :data="taskList.results"
        border
        fit
        stripe
        highlight-current-row
        max-height="600"
      >
        <el-table-column type="index" width="50"/>
        <el-table-column label="任务名称" prop="name"></el-table-column>
        <el-table-column label="发布状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.state==='待发布'" type="primary">待发布</el-tag>
            <el-tag v-else-if="scope.row.state==='进行中'" type="success">进行中</el-tag>
            <el-tag v-else type="warning">已关闭</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="截止日期" prop="end_date"></el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="200px"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-link
              type="success"
              size="small"
              @click="handleClick(scope)"
            >执行</el-link>
            <el-link
              v-if="scope.row.state==='待发布'"
              type="primary"
              size="small"
              @click="handleEdit(scope)"
            >编辑</el-link>
            <el-link
              v-if="scope.row.state==='待发布'"
              type="warning"
              size="small"
              @click="handleStart(scope)"
            >发布</el-link>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="taskList.count"
        :page.sync="pageForm.page"
        :limit.sync="pageForm.page_size"
        @pagination="getrecordlist"
      />
    </el-card>
    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType === 'edit' ? '编辑报送任务' : '新增报送任务'"
    >
      <el-form
        ref="Form"
        :model="qtaskForm"
        label-width="80px"
        label-position="right"
        :rules="rule1"
      >
        <el-form-item label="任务名称" prop="name">
          <el-input v-model="qtaskForm.name" placeholder="任务名称"/>
        </el-form-item>
        <el-form-item label="截止日期">
          <el-date-picker
            v-model="qtaskForm.end_date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="报送部门">
          <el-select
            style="width: 100%;"
            :multiple="multiple"
            v-model="qtaskForm.orgs"
            placeholder="报送部门"
          >
            <el-option
              v-for="item in orgData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirm('Form')">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getOrgList } from "@/api/org";
  import {getQtask,createQtask,updateQtask,qtaskStart} from "@/api/ability";
  import {genTree} from "@/utils";
  import checkPermission from "@/utils/permission";
  import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    components: {Pagination, Treeselect},
    name: "qualityTask",
    data() {
      return {
        pageForm:{
          page:1,
          page_size:20,
          search:''
        },
        fileList:[],
        updateId:null,
        qtaskForm: {
          name: "",
          end_date: "",
          orgs: [],
        },
        taskList: {
          count:0,
        },
        orgData: [],
        typeOptions: [],
        multiple: true,
        listLoading: false,
        dialogVisible: false,
        dialogType: "new",
        rule1: {
          name: [{ required: true, message: "请输入名称", trigger: "blur" }],
          orgs: [{ required: true, message: "请选择上报公司", trigger: "blur" }],
        },
        filterOrgText: "",
        treeLoding: false,
      }
    },
    mounted(){
      this.getOrgsList();
      this.getQtaskList();
    },
    methods:{
      handleClick(scope){
        this.$router.push({name: "qualityTaskDo" });
        let qtaskId = sessionStorage.getItem('qtaskId');
        if(qtaskId!==''&&qtaskId!==null&&qtaskId!==undefined){
          sessionStorage.removeItem('qtaskId');
          sessionStorage.setItem('qtaskId',scope.row.id);
        }else{
          sessionStorage.setItem('qtaskId',scope.row.id);
        }
      },
      getOrgsList(){
        getOrgList({ can_supervision: true }).then((res) => {
          this.orgData = res.data;
        });
      },
      getQtaskList(){
        this.listLoading = true;
        getQtask(this.pageForm).then((response) => {
          if (response.data) {
            this.taskList = response.data;
          }
          this.listLoading = false;
        });
      },
      //新增
      handleAdd(){
        this.dialogType = 'new';
        this.dialogVisible = true;
        this.$nextTick(() => {
          this.$refs["Form"].clearValidate();
        });
      },
      //提交
      async confirm(form) {
        let that = this;
        this.$refs[form].validate((valid) => {
          if (valid) {
            if (that.dialogType === "edit") {
              updateQtask(that.updateId, this.qtaskForm).then((res) => {
                if (res.code >= 200) {
                  this.getQtaskList();
                  this.dialogVisible = false;
                  this.$message.success("成功");
                }
              });
            } else {
              createQtask(this.qtaskForm).then((res) => {
                if (res.code >= 200) {
                  this.getQtaskList();
                  this.dialogVisible = false;
                  this.$message.success("成功");
                }
              });
            }
          } else {
            return false;
          }
        });
      },
      //查看
      handleShow(){},
      //开始
      handleStart(scope) {
        this.$confirm("确认发布该任务吗?", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            await qtaskStart(scope.row.id);
            this.getQtaskList();
            this.$message.success("成功");
          })
          .catch((err) => {
            console.error(err);
          });
      },
      //编辑
      handleEdit(scope) {
        this.qtaskForm = Object.assign({}, scope.row); // copy obj
        this.dialogType = "edit";
        this.dialogVisible = true;
        this.updateId = scope.row.id;
        this.$nextTick(() => {
          this.$refs["Form"].clearValidate();
        });
      },
      getrecordlist(){
        this.getQtaskList();
      },
      handleFilter() {
        this.getQtaskList();
      },
      resetFilter() {
        this.pageForm.search = '';
        this.getQtaskList();
      },
    },

  }
</script>

<style scoped>

</style>
