<template>
  <el-dialog
    title="选择活动方案"
    :close-on-click-modal="false"
    :visible="innerVisible"
    width="1024px"
    @close="handleClose"
    center
  >
    <div class="flex-between" style="margin-top:-20px;margin-bottom:10px">
      <div class="flex-between">
        <p style="line-height:28px">
          <!-- 预计结算日期为活动结束后 :  -->
          活动结束后&nbsp;&nbsp;
        </p>

        <digital-input
          style="width:200px;margin-right:10px"
          :values="settle_day"
          :min="0"
          :max="100000000000"
          :position="'right'"
          :precision="0"
          :size="'mini'"
          :controls="false"
          :append="'天'"
          @reschange="number_change($event)"
        />

        <p style="line-height:28px">内结算。</p>
      </div>

      <el-button type="primary" :size="'mini'" @click="onActivitySubmit">提交</el-button>
    </div>

    <ex-table
      v-loading="loading"
      :columns="[{ type: 'selection' }, ...(mapColumns[type || 'budget'])]"
      @page-curr-change="handlePageChange"
      @page-size-change="handleSizeChange"
      :page="pageInfo"
      :sizes="['15']"
      @screen-reset="
        pageInfo.curr = 1;
        parmValue.page = 1;
        searchList();
      "
      @screen-submit="
        pageInfo.curr = 1;
        parmValue.page = 1;
        searchList();
        "
      @selection="handleSelection"
      :table="table"
      :data="tableData"
    >
      <template #letter="{scope}">
        <a
          v-if="scope.row.plan_file"
          :href="scope.row.plan_file"
        >{{getFileNameWithUrl(scope.row.plan_file)}}</a>
        <p v-else>--</p>
      </template>

      <template #is_check="{scope}">
        <el-tag
          size="mini"
          :type="Number(scope.row.is_check) === mapCheck[type || 'budget'].ok ? '' :'warning'"
        >{{ Number(scope.row.is_check) === mapCheck[type || 'budget'].ok ? "已选择" : "未选择" }}</el-tag>
      </template>

      <template #supplier="{ scope }">
        <el-popover placement="top" trigger="hover">
          供应商编号:{{scope.row.supplierNo}}
          <template #reference>
            <i class="el-icon-warning-outline" />
          </template>
        </el-popover>
        <span style="margin-right:5px">{{scope.row.supplierName}}</span>
      </template>

      <template #status="{scope}">
        <el-tag
          size="mini"
          :type="Number(scope.row.status) === 2 ? '' :'info'"
        >{{(statusOptions.find(({value}) => Number(scope.row.status) === value) || {}).label || '--'}}</el-tag>
      </template>
    </ex-table>

    <settle-day-modal :visible.sync="dayVisible" @change="handleChange" />
  </el-dialog>
</template>

<script>
import { mapColumns, mapCheck, mapTitle } from "./_columns";
import asyncRequest from "@/apis/components/letter";
import SettleDayModal from "./settleDayModel.vue";

export default {
  props: ["visible", "title", "requsetMethod", "isFile", "type", "id"],
  components: { SettleDayModal },
  data() {
    return {
      table: {
        stripe: true,
        border: true,
        "max-height": "800px"
      },
      statusOptions: [
        { value: 1, label: "草稿" },
        { value: 2, label: "已发布" }
      ],
      noPagination: false,
      parmValue: {
        page: 1, // 页码
        size: 15 // 每页显示条数
      },
      selected: [],
      pageInfo: {
        size: 15,
        curr: 1,
        total: 0
      },
      sitem: {},
      mapCheck,
      mapTitle,
      mapColumns,
      tableData: [],
      dayVisible: false,
      loading: false,
      settle_day: 0
    };
  },
  computed: {
    innerVisible: {
      get() {
        return this.visible;
      },
      set(newVal) {
        this.$emit("update:visible", newVal);
      }
    }
  },
  watch: {
    visible() {
      if (!this.visible) return;
      this.searchList();
    }
  },
  methods: {
    handleClose() {
      this.tableData = [];
      this.loading = false;
      this.file_url = "";
      this.innerVisible = false;
      this.settle_day = 0;
    },
    handleSelection({ list }) {
      this.selected = list;
    },
    number_change(day) {
      this.settle_day = Number(day);
    },
    async handleChange() {
      const { id } = this.selected[0];
      const { code, data } = await asyncRequest.detail({ id });

      if (code !== 1) {
        this.loading = false;
        return;
      }

      const { planinfo = [], req_id, store_id, plan_file } = data;

      const plan_info = planinfo.map(
        ({
          name,
          service_cat,
          unit,
          price,
          num,
          remark,
          total_fee,
          tax,
          pay_fee,
          tax_fee
        }) => ({
          name,
          service_cat,
          unit,
          price,
          num,
          remark,
          total_fee,
          tax,
          pay_fee,
          tax_fee
        })
      );

      const letter = await asyncRequest.create({
        plan_type: 3,
        file: plan_file,
        settle_day: this.settle_day,
        plan_info,
        store_id,
        req_id
      });

      this.loading = false;

      if (letter.code === 0) {
        this.$emit("abnormal");
      }

      if (letter.code !== 1) return;
      this.innerVisible = false;
      this.$emit("refresh");
      //创建获取获取新id进入编辑页...
      // this.$router.push(`/customerService/letterEditing?id=${letter.data.id}&from=${3}&type=create`)
    },
    async onActivitySubmit() {
      if (this.selected.length === 0) {
        this.$message.warning("请选择一个活动方案");
        return;
      }

      if (this.selected.length > 1) {
        this.$message.warning("只能选择一个活动方案");
        return;
      }

      if (Number(this.settle_day) === 0) {
        this.$message.warning("结算天数不能为零!");
        return;
      }

      this.handleChange();
    },
    async searchList() {
      this.loading = true;
      const { code, data } = await asyncRequest.list({
        plan_type: 2,
        req_id: this.id,
        is_check: 1,
        ...this.parmValue
      });
      this.loading = false;
      if (code !== 1) return;
      this.tableData = data.list;
      this.noPagination = Number(data.count) <= 15;
      this.pageInfo.total = Number(data.count);
    }
  }
};
</script>
