<template>
  <div class="box">
    <div v-if="powers.some((i) => i == '007')">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="业务详情" name="1">
          <el-collapse v-model="activeNames" style="margin: -18px 0 0 0">
            <el-collapse-item title="有赞订单信息" name="0">
              <show-data-table
                :newTime="newTime"
                v-if="newTime !== ''"
                :sitem="detail"
                :columns="detail_columns"
              >
                <template slot="status">
                  <el-tag
                    :size="tablebtnSize"
                    :type="''"
                    v-text="
                      (status_list.find((item) => item.value == detail.status + '') || {})
                        .label || '--'
                    "
                  ></el-tag>
                </template>

                <template slot="title">
                  <div
                    v-if="detail.pic_path"
                    style="width: 20px; height: 20px"
                    class="hover fl"
                    v-viewer
                  >
                    <img
                      :src="detail.pic_path"
                      style="display: inline-block; width: 100%; height: 100%"
                      alt=""
                    />
                  </div>
                  <span>{{ detail.title }}</span>
                </template>
              </show-data-table>
            </el-collapse-item>
            <el-collapse-item title="商品信息" name="1">
              <div v-if="detail && detail.skuCode">
                <good_detail
                  :newTime="newTime"
                  v-if="newTime !== ''"
                  :id="detail.skuCode"
                />
              </div>
              <div v-else>暂无商品信息</div>
            </el-collapse-item>
            <el-collapse-item
              title="产品审核"
              name="2"
              v-if="ppowers.some((i) => i == '2') && status + '' === '2'"
            >
              <exam-form
                :statusList="statusList"
                :newTime="newTime"
                :disabled="false"
                :isMust="false"
                @searchChange="examForm($event, 0)"
              />
            </el-collapse-item>
            <el-collapse-item
              title="财务审核"
              name="3"
              v-if="ppowers.some((i) => i == '4') && status + '' === '4'"
            >
              <exam-form
                :statusList="statusList"
                :newTime="newTime"
                :disabled="false"
                :isMust="false"
                @searchChange="examForm($event, 1)"
            /></el-collapse-item>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="订单其他信息" name="3">
          <el-collapse v-model="activeNames" style="margin: -18px 0 0 0">
            <el-collapse-item title="支付信息" name="0">
              <show-data-table
                :newTime="newTime"
                v-if="newTime !== ''"
                :sitem="pay_info"
                :columns="pay_info_columns"
              >
                <template slot="pay_type">
                  <el-tag
                    :size="tablebtnSize"
                    :type="''"
                    v-text="
                      (
                        pay_type_list.find(
                          (item) => item.value == pay_info.pay_type + ''
                        ) || {}
                      ).label || '--'
                    "
                  ></el-tag>
                </template>

                <template slot="transaction">
                  <span v-for="(si, sii) in pay_info.transaction" :key="sii + si"
                    >{{ si }}{{ sii === 0 ? "" : "," }}</span
                  >
                </template>
              </show-data-table>
            </el-collapse-item>
            <el-collapse-item title="收货信息" name="1">
              <show-data-table
                :newTime="newTime"
                v-if="newTime !== ''"
                :sitem="address_info"
                :columns="address_info_columns"
              >
                <template slot="delivery_province">
                  <span>{{ address_info.delivery_province }}</span>
                  <span>{{ address_info.delivery_city }}</span>
                  <span>{{ address_info.delivery_district }}</span>
                  <span>{{ address_info.delivery_address }}</span>
                </template>
              </show-data-table>
            </el-collapse-item>
            <el-collapse-item title="发货信息" name="1">
              <el-table :data="express" size="mini" style="width: 100%" border>
                <el-table-column
                  v-for="(si, sii) in express_columns"
                  :key="sii.prop + sii + 'prop'"
                  :prop="si.prop"
                  :label="si.label"
                />
              </el-table>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="审批记录" name="2">
          <process-time-line
            v-if="newTime !== ''"
            :newTime="newTime"
            :type="'YZQRD'"
            :orderCode="queryId"
          />
        </el-tab-pane>

        <el-tab-pane label="流程图" name="6">
          <flow-chart process_id="20" type="YZQRD" :orderCode="queryId" />
       </el-tab-pane>
      </el-tabs>
    </div>
    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>

<script>
import mixinPage from "@/mixins/elPaginationHandle";
import resToken from "@/mixins/resToken";
import asyncRequest from "@/apis/service/youzan/othTransferOrderLog";
import good_detail from "./good_detail";
import {
  detail_columns,
  pay_info_columns,
  address_info_columns,
  express_columns,
  pay_type_list,
  status_list,
} from "./columns";
import { mapGetters } from "vuex";
export default {
  name: "othTransferOrderLogDetail",
  mixins: [mixinPage, resToken],
  components: {
    good_detail,
  },
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      const tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "othTransferOrderLogDetail"
        ) || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
    ppowers() {
      const tran =
        this.$store.getters.roleProcess.find((i) => i.process_type === "YZQRD") || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },
  data() {
    return {
      activeNames: ["0", "1", "2", "3", "4", "5", "6", "7"],
      loading: false,

      parmValue: {
        id: this.$route.query.id,
      },
      status: "",
      activeName: "1",
      newTime: "",
      detail_columns,
      pay_info_columns,
      address_info_columns,
      express_columns,
      pay_type_list,
      status_list,
      detail: null,
      pay_info: null,
      address_info: null,
      express: null,
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      const { id, type } = this.$route.query;
      this.queryId = id;
      this.queryType = type;
      this.loading = true;
      await this.initData();

      this.loading = false;
    },
    // 点击业务审核的保存按钮

    async examForm(e, type) {
      if (this.loading) return;
      const { state, remark } = e;
      let status = "0";
      switch (state) {
        case "1":
          if (type === 1) {
            status = "0";
          } else {
            status = "4";
          }
          break;
        case "0":
          if (type === 1) {
            status = "5";
          } else {
            status = "3";
          }
          break;
      }
      const model = {
        id: this.queryId,
        status: status,
        reason: state === "0" ? remark : "",
      };
      await this.setstatus(`提交${type === 1 ? "财务" : "产品"}部门审核`, model);
    },
    async setstatus(detail, model) {
      await this.$confirm(`确定要${detail}？`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await asyncRequest.status(model);
          if (res && res.code === 0) {
            this.$notify.success({
              title: "提交成功！",
              message: "",
            });
            await this.initForm();
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.$message.warning(res.message);
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },
    async initData() {
      this.loading = true;
      this.status = "";
      const { code, data, message } = await asyncRequest.detail(this.parmValue);
      if (code === 0) {
        const { detail, pay_info, address_info, express } = data ?? {};
        this.detail = detail ?? null;
        const { status } = detail ?? {};
        this.status = status ?? "";
        this.pay_info = pay_info ?? null;
        this.address_info = address_info ?? null;
        this.express = express ?? null;
      } else if (code >= 100 && code <= 104) {
        this.detail = null;
        this.pay_info = null;
        this.address_info = null;
        this.express = null;
        await this.logout();
      } else {
        this.$message.warning(message);
        this.detail = null;
        this.pay_info = null;
        this.address_info = null;
        this.express = null;
      }
      this.getNewTime();
      this.loading = false;
    },
    getNewTime() {
      this.newTime = new Date().valueOf();
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 20px 20px 0;
  box-sizing: border-box;
}
</style>
