<template>
  <el-card
    v-loading="loading"
    :body-style="{
      height: '100%',
      padding: 0,
      display: 'flex',
      'flex-direction': 'column',
    }"
  >
    <el-super-search
      v-model="params"
      :size="size"
      :dict="dict"
      :columns="SearchColumns"
      @reset="useReset"
      @submit="getList(params, page)"
    ></el-super-search>

    <el-row
      :gutter="10"
      class="mb10"
      type="flex"
      justify="end"
      style="margin-top: 20px"
    >
      <el-col :span="1.5">
        <el-button type="primary" :size="size" @click="useAdd">新增</el-button>
      </el-col>
    </el-row>

    <el-super-ux-table
      v-model="tableList"
      :size="size"
      :dict="dict"
      :page="page"
      :columns="TableColumns"
      index
      pagination
      convenitentOperation
      highlight-current-row
      storage-key="targetSuperTable"
      @row-dblclick="useDoubleClick"
      @pagination="getList({ ...page, ...params })"
      style="margin: 16px 0 0"
    >
      <!-- 年度 -->
      <template slot="year" slot-scope="scope">
        {{ scope.row.templateData.year }}
      </template>
      <!-- 模板 -->
      <template slot="name" slot-scope="scope">
        {{ scope.row.templateData.name }}
      </template>
      <!-- 开始日期 -->
      <template slot="startTime" slot-scope="scope">
        {{ scope.row.templateData.startTime }}
      </template>
      <!-- 结束日期 -->
      <template slot="deadlineTime" slot-scope="scope">
        {{ scope.row.templateData.deadlineTime }}
      </template>
      <!-- 周期 -->
      <template slot="cycle" slot-scope="scope">
        <component
          v-bind="scope.attr"
          :size="size"
          :value="scope.row.templateData.cycle"
          :options="dict.type[scope.attr.dictName]"
        ></component>
      </template>
      <!-- 维度 -->
      <template slot="dimensionalitys" slot-scope="scope">
        <div style="display: flex">
          <div v-for="o in scope.row.templateData.dimensionalitys">
            <component
              v-bind="scope.attr"
              :size="size"
              :value="o.dimensionality"
              :options="dict.type[scope.attr.dictName]"
            ></component>
          </div>
        </div>
      </template>
      <!-- 指标 -->
      <template slot="indexs" slot-scope="scope">
        <div style="display: flex">
          <div v-for="o in scope.row.templateData.indexs">
            <component
              v-bind="scope.attr"
              :size="size"
              :value="o.target"
              :options="dict.type[scope.attr.dictName]"
            ></component>
          </div>
        </div>
      </template>
      <ux-table-column fixed="right" title="操作" align="center" width="180">
        <template slot-scope="scope">
          <el-button :size="size" type="text" @click="useDoubleClick(scope.row)"
            >查看
          </el-button>
          <el-button
            v-if="scope.row.status == '0' || scope.row.status == '3'"
            type="text"
            :size="size"
            @click="useSubmit(scope.row)"
            >提交</el-button
          >
          <el-button
            v-if="scope.row.status == '0' || scope.row.status == '3'"
            type="text"
            :size="size"
            @click="useEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            v-if="scope.row.status == '0' || scope.row.status == '3'"
            type="text"
            :size="size"
            @click="useDel(scope.row)"
            >删除</el-button
          >
          <el-button
            v-if="scope.row.status == '1'"
            type="text"
            :size="size"
            @click="useRevocation(scope.row)"
            >收回
          </el-button>
        </template>
      </ux-table-column>
    </el-super-ux-table>

    <target-details
      ref="targetDetails"
      :size="size"
      :dict="dict"
      :row="rowDetail"
      :addType="pageStu"
      @refresh="useReset"
    ></target-details>
  </el-card>
</template>

<script>
import {
  listTarget,
  delTarget,
  submitTarget,
} from "@/api/business/spd/starget/target";
import { rebacktWork } from "@/api/purchase/workSpace.js";
import useColumns from "./columns";
import { dicts } from "./dicts";
export default {
  name: "target",
  dicts: [...dicts, "oa_templete_id"],
  components: {
    targetDetails: () => import("./add/index.vue"),
    TemplateDownload: () => import("./templateDownload.vue"),
    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
    ElSuperSearch: () => import("@/components/super-search/index.vue"),
    CollapseTransition: () => import("@/components/MyCollapse/collapse.vue"),
    ElDictTag: () => import("@/components/DictTag/index.vue"),
  },
  data() {
    const { SearchColumns, TableColumns } = useColumns();
    const params = this.$init.params(SearchColumns);
    const page = this.$init.page();
    return {
      page,
      params,
      size: "mini",
      SearchColumns,
      TableColumns,
      // 遮罩层
      loading: true,
      // 页面状态
      pageStu: "",
      //列表数据
      tableList: [],
      rowDetail: {},
      openTemplateDownload: false,
    };
  },
  created() {
    this.getList(this.params, this.page);
  },
  methods: {
    //新增
    useAdd() {
      this.pageStu = "add";
      const { setVisible } = this.$refs.targetDetails;
      setVisible(true);
    },
    //提交
    async useSubmit(row) {
      this.$modal.loading("提交中...");
      try {
        const { msg, code } = await submitTarget(row.id);
        if (code === 200) {
          this.$modal.notifySuccess("提交成功");
          this.$modal.closeLoading();
          row.status = "1";
        }
      } catch (err) {
        console.error(err);
        this.$modal.closeLoading();
      }
    },
    //撤回
    useRevocation(row) {
      this.$modal.loading("收回中...");
      let params = {
        billCode: row.code,
        fdId: row.flowId,
        fdTemplateId: this.dict.type.oa_templete_id.find((item) => {
          return item.label == "营销目标";
        }).value,
        billMaker: row.createBy,
      };
      rebacktWork(params)
        .then((res) => {
          if (res.code === 200) {
            this.$modal.notifySuccess("收回成功");
            this.$modal.closeLoading();
            row.status = '0';
          }
        })
        .catch((err) => {
          this.$message.error(err);
          this.$modal.closeLoading();
        });
    },
    //修改
    useEdit(row) {
      this.pageStu = "edit";
      this.rowDetail = row;
      const { setVisible } = this.$refs.targetDetails;
      setVisible(true);
    },
    //删除
    useDel(row) {
      this.$modal
        .confirm("确认删除选择数据")
        .then(() => {
          delTarget(row.id).then((res) => {
            if (res.code === 200) {
              this.$modal.msgSuccess("删除成功");
              this.getList(this.params, this.page);
            }
          });
        })
        .catch(() => {});
    },
    //双击
    useDoubleClick(row) {
      this.pageStu = "see";
      this.rowDetail = row;
      const { setVisible } = this.$refs.targetDetails;
      setVisible(true);
    },

    //重置
    useReset() {
      this.params = this.$init.params(this.SearchColumns);
      this.page = this.$init.page();
      this.getList(this.params, this.page);
    },
    //查询列表
    async getList(prop, page) {
      try {
        this.loading = true;
        let params = {
          ...prop,
          ...page,
          params: {
            beginTime: prop["dateRange"] ? prop["dateRange"][0] : "",
            endTime: prop["dateRange"]
              ? prop["dateRange"][1] + " 23:59:59"
              : "",
          },
        };
        delete params.dateRange;
        let { code, rows, total } = await listTarget(params);
        if (code === 200) {
          this.tableList = rows;
          this.page.total = total;
          for (const item of this.tableList) {
            item.templateData.year = item.templateData.year.substr(0, 4);
          }
          this.total = total;
        }
      } catch (error) {
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.el-card {
  width: calc(100% - 32px);
  height: calc(100vh - 32px);
  margin: 16px;
  padding: 16px;
  border-radius: 8px;
  overflow-y: auto;
  overflow-x: hidden;
}

.el-button-group + .el-button-group {
  margin: 0 0 0 8px;
}
</style>
