<template>
  <!-- 我的优惠券 -->
  <div class="mycoupon-wrapper maCoupon">
    <!-- <div class="user-com-title">我的发票</div> -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="申请开票" name="my">
        <el-table
          :data="tableData1"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#FAFAFA' }"
        >
          <el-table-column type="index" label="序号" align="center" width="60">
          </el-table-column>
          <el-table-column
            prop="order_no"
            label="订单号"
            show-overflow-tooltip
            align="center"
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="invoice_code"
            label="商品名称"
            align="center"
            width="180"
          >
            <template slot-scope="scope">
              <div v-for="(v, i) in scope.row.order_goods" :key="i" style="display: flex">
                <img
                  :src="imgUrl + v.sku_image"
                  alt
                  style="width: 50px; height: 50px; margin: 10px"
                />
                <div style="margin: 10px">{{ v.goods_name }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="order_money"
            label="订单金额"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="invoice_time"
            label="申请开票时间"
            align="center"
            width="140"
          >
            <template slot-scope="scope">{{
              $dayjs(scope.row.invoice_time * 1000).format("YYYY-MM-DD HH:mm")
            }}</template>
          </el-table-column>
          <!-- <el-table-column
            prop="invoice_status"
            label="状态"
            show-overflow-tooltip
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="!scope.row.invoice_status">
                <span> 未开票 </span>
              </div>
            </template>
          </el-table-column> -->

          <el-table-column prop="address" label="操作" align="center">
            <template slot-scope="scope">
              <div class="cz">
                <span @click="bill(scope.row)"> 申请开票 </span>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <Page
          @currentChange="currentChange1"
          :total="total1"
          :pageSize="query1.limit"
        ></Page
      ></el-tab-pane>
      <el-tab-pane label="开票历史" name="history">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#FAFAFA' }"
        >
          <el-table-column type="index" label="序号" align="center" width="60">
          </el-table-column>
          <el-table-column
            prop="order_no"
            label="订单号"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="invoice_code"
            label="发票编码"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="order_money"
            label="订单金额"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="invoice_time"
            label="申请开票时间"
            align="center"
            width="140"
          >
            <template slot-scope="scope">{{
              $dayjs(scope.row.invoice_time * 1000).format("YYYY-MM-DD HH:mm")
            }}</template>
          </el-table-column>
          <el-table-column
            prop="invoice_status"
            label="状态"
            show-overflow-tooltip
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.invoice_status">
                <span> 已开票 </span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="address" label="操作" align="center">
            <template slot-scope="scope">
              <div class="cz">
                <span @click="handleView(scope.$index, scope.row)"> 查看凭证 </span>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <Page @currentChange="currentChange" :total="total" :pageSize="query.limit"></Page
      ></el-tab-pane>
    </el-tabs>

    <DialogSlot
      tipsText="查看发票凭证"
      :dialogSlotShow.sync="dialogSlotShow"
      @clickConfirm="clickConfirm"
      :cancleBtnShow="false"
      width="432px"
    >
      <template v-slot:contentSlot>
        <div class="fpImge">
          <img :src="imgUrl + invoice_image" alt="" />
        </div>
      </template>
    </DialogSlot>
    <!-- 申请开票 -->
    <Dialog
      ref="billDialog"
      :contentText="contentText"
      @clickConfirm="billBtn"
      :cancelText="'返回'"
    ></Dialog>
  </div>
</template>

<script>
import Setting from "~/setting";
export default {
  name: "invoice",
  auth: "guest",
  data() {
    return {
      imgUrl: Setting.uplodBaseURL,
      dialogSlotShow: false,
      total: 0,
      query1: {
        page: 1,
        limit: 10,
      },
      total1: 4,
      query: {
        page: 1,
        limit: 10,
      },
      total: 4,
      tableData1: [],
      tableData: [],
      invoice_image: "",
      activeName: "my",
      tableRow: {},
      contentText: "确认删除?",
    };
  },

  fetch({ store }) {
    store.commit("isHeader", true);
    store.commit("isFooter", true);
  },
  head() {
    return {
      title: "我的发票-" + this.$store.state.titleCon,
    };
  },
  created() {
    this.getCouponList();
    this.getCouponList1();
  },
  methods: {
    // 分页点击
    currentChange1(e) {
      this.query1.page = e;
      this.getCouponList1();
    },
    currentChange(e) {
      this.query.page = e;
      this.getCouponList();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleView(i, v) {
      console.log(i, v);
      this.invoice_image = v.invoice_image;
      this.dialogSlotShow = true;
    },
    clickConfirm() {
      this.dialogSlotShow = false;
    },
    getCouponList1() {
      let obj = {
        page: this.query1.page,
        page_size: this.query1.limit,
        order_status: "all",
        invoice: 0,
        invoice_status: 0,
      };
      this.$axios
        .post("/order/lists", obj)
        .then((res) => {
          this.tableData1 = res.data.list;
          this.total1 = res.data.count;
          console.log(this.tableData1);
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    getCouponList() {
      let obj = {
        page: this.query.page,
        page_size: this.query.limit,
        order_status: "all",
        invoice: 1,
        invoice_status: 1,
      };
      this.$axios
        .post("/order/lists", obj)
        .then((res) => {
          this.tableData = res.data.list;
          this.total = res.data.count;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    bill(row) {
      this.tableRow = undefined;
      this.contentText = "确定要申请开发票吗？";
      this.tableRow = row;
      this.$refs.billDialog.dialogShow = true;
    },
    billBtn() {
      let obj = {
        order_id: this.tableRow.order_id,
        store_id: JSON.parse(localStorage.getItem("drugstoreObj")).id,
      };
      this.$axios
        .post(`/order/doInvoice`, obj)
        .then((res) => {
          this.$message.success(res.message);
          this.getCouponList1();
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.cz {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: var(--themeColor);
  cursor: pointer;
}
.maCoupon {
  padding: 0 30px;
}
.fpImge {
  width: 100%;
  height: 186px;
  margin-bottom: 20px;
  img {
    width: 100%;
    height: 100%;
  }
}
.user-com-tabs {
  margin-bottom: 20px;
  .item {
    margin-right: 70px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    position: relative;
    cursor: pointer;
  }
  .on {
    &:after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      width: 47px;
      height: 2px;
      background: var(--themeColor);
    }
  }
}
</style>
