<template>
  <div class="app-container">
    <el-row :gutter="6">
      <el-col :xs="24" :md="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>月计划</span>
            (当前选择:
            <span style="color:darkblue;font-weight:bold">{{nowPlan.name}}</span>
            )
          </div>
          <div>
            <div>
              <el-button type="primary" @click="handleCreatePlan" size="mini">新建计划</el-button>
            </div>
            <el-table
              v-loading="listLoadingplan"
              :data="planData.results"
              style="width: 100%;margin-top:2px;"
              border
              fit
              stripe
              highlight-current-row
              height="300"
              @row-click="planClick"
            >
              <el-table-column label="计划名称">
                <template slot-scope="scope" v-if="scope.row.name">{{ scope.row.name }}</template>
              </el-table-column>
              <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                    <el-button
                      type="primary"
                      size="mini"
                      :disabled="!checkPermission(['plan_update'])"
                      @click="handleUpdatePlan(scope)"
                      icon="el-icon-edit"
                    ></el-button>
                    <el-button
                      type="danger"
                      size="mini"
                      :disabled="!checkPermission(['plan_delete'])"
                      @click="handleDeletePlan(scope)"
                      icon="el-icon-delete"
                    ></el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="planData.count>0"
              :total="planData.count"
              :page.sync="listQuery_plan.page"
              :limit.sync="listQuery_plan.page_size"
              @pagination="getPlanList_"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :md="16">
        <el-card class="box-card" style="margin-top:2px">
          <div slot="header" class="clearfix">
            <span>待策划项目</span>
          </div>
          <div>
            <div style="margin-bottom:2px">
              <el-button type="primary" @click="handleAppend" size="mini">添加到计划</el-button>
            </div>
            <el-table
              v-loading="listLoading"
              :data="projectData.results"
              style="width: 100%;"
              border
              fit
              stripe
              highlight-current-row
              height="300"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column label="项目号">
                <template slot-scope="scope" v-if="scope.row.number">{{ scope.row.number }}</template>
              </el-table-column>
              <el-table-column label="受审核方" width="300px">
                <template slot-scope="scope">{{ scope.row.auditee_v.name }}</template>
              </el-table-column>
              <el-table-column label="项目信息" width="300px" :show-overflow-tooltip="true">
                <template slot-scope="scope" v-if="scope.row.certapps">
                  <el-tag
                    v-for="(item, index) in scope.row.certapps"
                    :key="index"
                    style="margin:2px"
                  >{{item}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="当前状态">
                <template slot-scope="scope">{{ scope.row.state}}</template>
              </el-table-column>
              <el-table-column label="创建人">
                <template slot-scope="scope">{{ scope.row.create_by_.name}}</template>
              </el-table-column>
              <el-table-column label="创建日期" >
                <template slot-scope="scope">
                  <span>{{ scope.row.create_time }}</span>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="projectData.count>0"
              :total="projectData.count"
              :page.sync="listQuery_project.page"
              :limit.sync="listQuery_project.page_size"
              @pagination="getProjectList_"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-card class="box-card" style="margin-top:2px">
        <div slot="header" class="clearfix">
          <span>月计划项目</span>
          (当前选择:
          <span style="color:darkblue;font-weight:bold">{{nowPlan.name}}</span>
          )
        </div>
        <div>
          <el-table
            v-loading="listLoadingplan2"
            :data="projectData2.results"
            style="width: 100%;"
            border
            fit
            stripe
            highlight-current-row
            height="300"
          >
            <el-table-column label="项目号">
              <template slot-scope="scope" v-if="scope.row.number">{{ scope.row.number }}</template>
            </el-table-column>
            <el-table-column label="受审核方" width="300px">
              <template slot-scope="scope">{{ scope.row.auditee_v.name }}</template>
            </el-table-column>
            <el-table-column label="项目信息" width="300px" :show-overflow-tooltip="true">
              <template slot-scope="scope" v-if="scope.row.certapps">
                <el-tag
                  v-for="(item, index) in scope.row.certapps"
                  :key="index"
                  style="margin:2px"
                >{{item}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="当前状态">
              <template slot-scope="scope">{{ scope.row.state}}</template>
            </el-table-column>
            <el-table-column label="是否可派差">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.can_paichai" disabled></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="创建人">
              <template slot-scope="scope">{{ scope.row.create_by_.name}}</template>
            </el-table-column>
            <el-table-column label="创建日期" >
              <template slot-scope="scope">
                <span>{{ scope.row.create_time }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="260" fixed="right">
              <template slot-scope="scope">
                  <el-button
                    v-if="scope.row.state =='策划中'"
                    type="primary"
                    size="small"
                    :disabled="!checkPermission(['project_update'])"
                    @click="planProject(scope)"
                  >计划</el-button>
                  <el-button
                    v-if="scope.row.state =='策划中'"
                    type="plain"
                    size="small"
                    :disabled="!checkPermission(['project_assgin'])||!scope.row.can_paichai"
                    @click="assginProject(scope)"
                  >任务下达</el-button>
                  <el-button
                    size="small"
                    :disabled="!checkPermission(['project_delete'])"
                    @click="handleDetailProject(scope)"
                  >详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="projectData2.count>0"
            :total="projectData2.count"
            :page.sync="listQuery2.page"
            :limit.sync="listQuery2.page_size"
            @pagination="getProjectList_2"
          />
        </div>
      </el-card>
    </el-row>
    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='update'?'编辑':'新增'">
      <el-form
        ref="elForm"
        :model="formData"
        label-width="80px"
        label-position="right"
        :rules="rules"
      >
        <el-form-item label="计划名称" prop="name">
          <el-input v-model="formData.name" placeholder="名称" />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmPlan('Form')">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getCertappList } from "@/api/certapp";
import { getPlanList, createPlan, updatePlan, deletePlan } from "@/api/plan";
import {
  getProjectList,
  createProject,
  assginProject,
  planProject,
} from "@/api/project";
import Pagination from "@/components/Pagination";
import checkPermission from "@/utils/permission";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { genTree } from "../../utils";
import router from "@/router";
export default {
  components: { Pagination, Treeselect },
  data() {
    return {
      listLoading: false,
      listLoadingplan: false,
      listLoadingplan2: false,
      listQuery_plan: {
        page: 1,
        page_size: 20,
      },
      listQuery_project: {
        page: 1,
        page_size: 20,
        state: "待策划",
        planoff: true,
      },
      listQuery2: {
        page: 1,
        page_size: 20,
        plan: "",
      },
      planData: { count: 0, results: [] },
      projectData: { count: 0, results: [] },
      projectData2: { count: 0, results: [] },
      dialogVisible: false,
      dialogType: "create",
      formData: {},
      nowPlan: { id: 0 },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
      multipleSelection: [],
      multiprojects: [],
    };
  },
  watch: {},
  created() {
    this.getProjectList_();
    this.getPlanList_();
  },
  methods: {
    checkPermission,
    getProjectList_() {
      this.listLoading = true;
      getProjectList(this.listQuery_project).then((response) => {
        if (response.data) {
          this.projectData = response.data;
        }
        this.listLoading = false;
      });
    },
    getPlanList_() {
      this.listLoadingplan = true;
      getPlanList(this.listQuery_plan)
        .then((res) => {
          this.planData = res.data;
          this.listLoadingplan = false;
          if (res.data && res.data.results.length) {
            this.nowPlan = res.data.results[0];
            this.listQuery2.plan = res.data.results[0].id;
            this.getProjectList_2();
          }
        })
        .catch((e) => {
          this.listLoadingplan = false;
        });
    },
    resetFilter() {
      this.listQuery = {
        state: "已受理",
      };
      this.getCertappList_();
    },
    handleFilter() {
      this.getCertappList_();
    },
    planProject(scope) {
      this.$router.push({
        name: "PlanProject",
        params: { id: scope.row.id },
      });
    },
    handleCreatePlan() {
      this.dialogVisible = true;
      this.dialogType = "create";
    },
    handleUpdatePlan(scope) {
      this.formData = Object.assign({}, scope.row);
      this.dialogType = "update";
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["elForm"].clearValidate();
      });
    },
    handleDeletePlan(scope) {
      this.$confirm("确定删除该计划?", "警告", { type: "warning" })
        .then(() => {
          deletePlan(scope.row.id).then((res) => {
            this.getPlanList_()
            this.$message.success("成功");
            
          });
        })
        .catch((res) => {});
    },
    handleDetailProject(scope) {
      this.$router.push({
        name: "PlanProject",
        params: { id: scope.row.id },
      });
    },
    confirmPlan() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          const isEdit = this.dialogType === "update";
          if (isEdit) {
            updatePlan(this.formData.id, this.formData).then(() => {
              this.getPlanList_();
              this.dialogVisible = false;
              this.$message.success("成功");
            });
          } else {
            createPlan(this.formData).then((res) => {
              // this.org = res.data
              // this.tableData.unshift(this.org)
              this.getPlanList_();
              this.dialogVisible = false;
              this.$message.success("成功");
            });
          }
        } else {
          return false;
        }
      });
    },
    handleSelectionChange(val) {
      var ddd = [];
      for (var i = 0; i < val.length; i++) {
        ddd.push(val[i].id);
      }
      this.multiprojects = ddd;
    },
    handleAppend() {
      if (this.multiprojects.length > 0) {
        if (this.nowPlan.id != 0) {
          this.$confirm(
            "是否将该项目添加至(" + this.nowPlan.name + ")中",
            "提示",
            {}
          )
            .then(() => {
              planProject({
                plan: this.nowPlan.id,
                projects: this.multiprojects,
              }).then((res) => {
                this.$message.success("成功");
                this.getProjectList_();
                this.getProjectList_2();
              });
            })
            .catch((res) => {});
        } else {
          this.$message.warning("请先选择一个计划");
        }
      } else {
        this.$message.warning("请先选择待策划项目");
      }
    },
    planClick(row, column, event) {
      if (this.nowPlan.id != row.id) {
        this.nowPlan = row;
        this.listQuery2.plan = row.id;
        this.listQuery2.page = 1;
        this.getProjectList_2();
      } else {
        this.nowPlan = row;
        this.listQuery2.plan = row.id;
        this.getProjectList_2();
      }
    },
    getProjectList_2() {
      this.listLoadingplan2 = true;
      getProjectList(this.listQuery2).then(res=>{
        // console.log(res.data)
        this.projectData2 = res.data
        this.listLoadingplan2 = false
      }).catch(e=>{
        this.listLoadingplan2 = false
      })
    },
    assginProject(scope) {
      this.$confirm("确定下达审核任务?", "警告", { type: "warning" }).then(
        () => {
          assginProject(scope.row.id).then((res) => {
            this.$message.success("成功");
            this.getProjectList_2();
          });
        }
      ).catch(e=>{})
    },
  },
};
</script>
