<template>
  <div class="app-container">
    <el-card>
      <el-row :gutter="6">
        <!--<el-col :xs="24" :md="4">
          <el-select v-model="pageForm.org" placeholder="所属单位" @change="handleFilter" clearable style="width: 100%;">
            <el-option
              v-for="item in orgData"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-col>-->
        <el-col :xs="24" :md="4">
          <el-select v-model="pageForm.qtask" placeholder="所属任务" @change="handleFilter" clearable style="width: 100%;">
            <el-option
              v-for="item in taskOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :xs="24" :md="4">
          <el-select v-model="pageForm.qtask__state" placeholder="发布状态" @change="handleFilter" clearable
                     style="width: 100%;">
            <el-option
              v-for="item in stateOptions"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-col>

        <el-col :xs="24" :md="4">
          <el-input
            v-model="pageForm.search"
            placeholder="资质/服务"
            style="width: 100%;"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
        </el-col>
        <el-col :xs="24" :md="6">
          <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>
        </el-col>
      </el-row>
    </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="截止日期" prop="end_date"></el-table-column>
        <el-table-column label="发布状态" prop="state"></el-table-column>
        <el-table-column
          align="center"
          label="操作"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-link
              v-if="checkPermission(['service_update'])"
              type="primary"
              size="small"
              icon="el-icon-edit"
              @click="serviceUpdate(scope)"
            >更新服务
            </el-link>
            <el-link
              v-if="checkPermission(['quali_create'])"
              type="success"
              size="small"
              icon="el-icon-view"
              @click="qualiCreate(scope)"
            >新增资质
            </el-link>
            <el-link
              v-if="checkPermission(['quali_update'])"
              type="warning"
              size="small"
              icon="el-icon-s-promotion"
              @click="qualiUpdate(scope)"
            >编辑资质
            </el-link>
            <el-link
              v-if="checkPermission(['ability_create'])"
              type="warning"
              size="small"
              icon="el-icon-s-promotion"
              @click="abilityCreate(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="dialogVisibleAbility"
      title="新增能力"
    >
      <el-form
        ref="abilityForm"
        :model="abilityForm"
        label-width="80px"
        label-position="right"
        :rules="rule"
      >
        <el-form-item label="能力类型" prop="type">
          <el-select
            style="width: 100%;"
            v-model="abilityForm.type"
            placeholder="能力类型"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="能力领域" prop="afield">
          <el-select
            style="width: 100%;"
            v-model="abilityForm.afield"
            placeholder="能力领域"
          >
            <el-option
              v-for="item in gradeOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="能力文件" prop="file">
          <el-upload
            ref="upload"
            :action="upUrl"
            :on-preview="handlePreview"
            :on-success="handleUpSuccess"
            :on-remove="handleRemove"
            :headers="upHeaders"
            :file-list="fileLista"
            :limit="1"
            accept=".xls,.xlsx"
          >
            <el-button size="small" type="primary">上传文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="新增数量">
          <el-input-number v-model="abilityForm.num" :min="1" label="新增数量"></el-input-number>
        </el-form-item>

      </el-form>
      <div style="text-align: right">
        <el-button type="danger" @click="dialogVisibleAbility = false">取消</el-button>
        <el-button v-if="checkPermission(['qaction_confirm'])" type="primary"  @click="confirmAbility('abilityForm')">确认</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType === 'edit' ? '新增资质' : '编辑资质'"
    >
      <el-form
        ref="Form"
        :model="qualiForm"
        label-width="80px"
        label-position="right"
        :rules="rule"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="qualiForm.name" placeholder="任务名称"/>
        </el-form-item>
        <el-form-item label="资质类型" prop="type">
          <el-select
            style="width: 100%;"
            v-model="qualiForm.type"
            placeholder="资质类型"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="资质等级" v-if="qualiForm.type==='OTHER'">
          <el-select
            style="width: 100%;"
            v-model="qualiForm.grade"
            placeholder="资质类型"
          >
            <el-option
              v-for="item in gradeOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="二级等级" v-if="qualiForm.type==='OTHER'">
          <el-select
            style="width: 100%;"
            v-model="qualiForm.level"
            placeholder="资质类型"
          >
            <el-option
              v-for="item in levelOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="资质范围">
          <el-input
            type="textarea"
            :rows="4"
            v-model="qualiForm.scope"
          ></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            type="textarea"
            :rows="4"
            v-model="qualiForm.description"
            placeholder="描述"
          ></el-input>
        </el-form-item>
        <el-form-item label="备案城市" v-if="qualiForm.type==='OTHER'">
          <el-cascader
            v-model="qualiForm.citys"
            :options="options"
            @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="所在省" v-if="qualiForm.type!=='OTHER'">
          <el-select
            v-model="qualiForm.province"
            placeholder="省份"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.label"
              :label="item.label"
              :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在市" v-if="qualiForm.type!=='OTHER'">
          <el-select
            style="width: 100%;"
            v-model="qualiForm.city"
            placeholder="资质类型"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
        <el-button v-if="checkPermission(['qaction_confirm'])" type="primary" @click="confirm('Form')">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getQtaskMy,getQtask, createQuali, updateQuali, createAbility, updateService} from "@/api/ability";
  import {genTree} from "@/utils";
  import {getOrgList} from "@/api/org";
  import {getCMAGroup} from "@/api/cma";
  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";
  import { upUrl, upHeaders } from "@/api/file";

  export default {
    components: {Pagination, Treeselect},
    name: "mQualityTask",
    data() {
      return {
        upHeaders: upHeaders(),
        upUrl: upUrl(),
        qtask:null,
        pageForm: {
          page: 1,
          page_size: 10,
          org: '',
          search: '',
          qtask: '',
          qtask__state: ''
        },
        fileList: [],
        taskOptions: [],
        fileLista: [],
        updateId: null,

        taskList: {},
        orgData: [],
        multiple: true,
        listLoading: false,
        dialogVisible: false,
        dialogVisibleAbility: false,
        dialogType: "new",
        qualiForm: {
          name: "",
          type: "",
          grade: "",
          scope: "",
          level: "",
          province: "",
          city: "",
          description: "",
          citys: [],
        },
        abilityForm:{
          atype:'',
          afield:'',
          file:'',
          num:'',
          qtask:'',
        },
        rule: {
          name: [{required: true, message: "请输入名称", trigger: "blur"}],
          orgs: [{required: true, message: "请选择上报公司", trigger: "blur"}],
          type: [{required: true, message: "请选择类型", trigger: "blur"}],
          afield: [{required: true, message: "请选择能力领域", trigger: "blur"}],
        },
        stateOptions: [
          '待发布',
          '进行中',
          '已关闭',
        ],
        typeOptions: [
          'CMA',
          'CNAS',
          'OTHER'
        ],
        gradeOptions: [
          '一级',
          '二级',
          '三级'
        ],
        levelOptions: [
          '一级',
          '二级',
          '三级'
        ],
        options: [
          {value: "市场监管总局", label: "市场监管总局"},
          {value: "北京市", label: "北京市"},
          {value: "上海市", label: "上海市"},
          {value: "天津市", label: "天津市"},
          {value: "重庆市", label: "重庆市"},
          {value: "黑龙江省", label: "黑龙江省"},
          {value: "辽宁省", label: "辽宁省"},
          {value: "吉林省", label: "吉林省"},
          {value: "河北省", label: "河北省"},
          {value: "河南省", label: "河南省"},
          {value: "湖北省", label: "湖北省"},
          {value: "湖南省", label: "湖南省"},
          {value: "山东省", label: "山东省"},
          {value: "山西省", label: "山西省"},
          {value: "陕西省", label: "陕西省"},
          {value: "安徽省", label: "安徽省"},
          {value: "浙江省", label: "浙江省"},
          {value: "江苏省", label: "江苏省"},
          {value: "福建省", label: "福建省"},
          {value: "广东省", label: "广东省"},
          {value: "海南省", label: "海南省"},
          {value: "四川省", label: "四川省"},
          {value: "云南省", label: "云南省"},
          {value: "贵州省", label: "贵州省"},
          {value: "青海省", label: "青海省"},
          {value: "甘肃省", label: "甘肃省"},
          {value: "江西省", label: "江西省"},
          {value: "内蒙古自治区", label: "内蒙古自治区"},
          {value: "宁夏回族自治区", label: "宁夏回族自治区"},
          {value: "新疆维吾尔自治区", label: "新疆维吾尔自治区"},
          {value: "西藏自治区", label: "西藏自治区"},
          {value: "广西壮族自治区", label: "广西壮族自治区"},
          {value: "香港特别行政区", label: "香港特别行政区"},
          {value: "澳门特别行政区", label: "澳门特别行政区"},
          {value: "台湾省", label: "台湾省"},
        ],
        filterOrgText: "",
        treeLoding: false,
      }
    },
    mounted() {
      this.getTableList();
      this.getGroup();
      this.getQtaskList();
    },
    methods: {
      handlePreview(file) {
        if ("url" in file) {
          window.open(file.url);
        } else {
          window.open(file.response.data.path);
        }
      },
      handleUpSuccess(res, file, filelist) {
        this.abilityForm.file = res.data.path;
      },
      handleRemove(file, filelist){
        this.abilityForm.file = null;
      },
      checkPermission,
      getTableList() {
        this.listLoading = true;
        getQtaskMy(this.pageForm).then((response) => {
          if (response.data) {
            debugger;
            this.taskList = response.data;
          }
          this.listLoading = false;
        });
      },
      getGroup() {
        /*getCMAGroup({page: 0, group_by: 'sszx'}).then((response) => {
          this.orgData = response.data;
        });*/
        getOrgList({can_supervision: true}).then((res) => {
          this.orgData = res.data;
        });
      },
      getQtaskList() {
        getQtask().then((response) => {
          if (response.data) {
            this.taskOptions = response.data.results;
          }
        })
      },
      getrecordlist() {
        this.getTableList();
      },
      handleFilter() {
        this.getTableList();
      },
      resetFilter() {
        this.pageForm.search = '';
        this.pageForm.qtask = '';
        this.pageForm.qtask__state = '';
        this.getTableList();
      },
      serviceUpdate(scope) {
        this.qtask = scope.row.id;
      },
      qualiCreate(scope) {
        this.qtask = scope.row.id;
        this.dialogType = 'new';
        this.dialogVisible = true;
      },

      qualiUpdate(scope) {
        this.qtask = scope.row.id;
        this.dialogType = 'edit';
        this.dialogVisible = true;
      },
      abilityCreate(scope) {
        this.qtask = scope.row.id;
        this.dialogVisibleAbility = true;
      },
      async confirm(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            let obj = new Object();
            obj.qtask = this.qtask;
            obj.value2 = this.qualiForm;
            const isEdit = this.dialogType === "edit";
            if (isEdit) {
              updateQuali( obj).then((res) => {
                if (res.code >= 200) {
                  this.getTableList();
                  this.dialogVisible = false;
                  this.$message.success("成功");
                }
              });
            } else {
              createQuali(obj).then((res) => {
                if (res.code >= 200) {
                  this.getTableList();
                  this.dialogVisible = false;
                  this.$message.success("成功");
                }
              });
            }
          } else {
            return false;
          }
        });
      },
      async confirmAbility(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            this.abilityForm.qtask = this.qtask;
            createQuali(this.abilityForm).then((res) => {
              if (res.code >= 200) {
                this.getTableList();
                this.dialogVisible = false;
                this.$message.success("成功");
              }
            });
          } else {
            return false;
          }
        });
      },
    },
  }
</script>

<style scoped>

</style>
