<template>
  <div class="saas-manage card">
    <div class="search">
      <el-form :model="searchForm" size="small" :inline="true">
        <el-form-item label="所属平台">
          <el-select
            style="width: 120px"
            filterable
            clearable
            v-model="searchForm.salesPlatform"
            placeholder="请选择所属平台">
            <el-option
              v-for="(value, index) in plateformList"
              :key="index"
              :value="value"
              :label="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三方平台订单ID">
          <el-input
            style="width: 160px"
            clearable
            v-model="searchForm.orderThirdId"
            placeholder="请输入三方平台订单ID"></el-input>
        </el-form-item>
        <el-form-item label="店铺单号">
          <el-input
            style="width: 140px"
            clearable
            v-model="searchForm.shopNumber"
            placeholder="请输入店铺单号"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            style="width: 360px"
            v-model="searchForm.createTimeText"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="失败类型">
          <el-select
            v-model="searchForm.failType"
            style="width: 120px"
            filterable
            clearable
            value-key=""
            placeholder="请选择失败类型">
            <el-option
              v-for="(type, index) in failTypes"
              :key="index"
              :label="type.value"
              :value="type.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            :loading="searchLoading"
            icon="el-icon-search"
            @click="search">
            查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="danger"
            size="small"
            :loading="delLoading"
            icon="el-icon-delete"
            @click="deleteData()">
            删除
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            :loading="downloadLoading"
            icon="el-icon-download"
            @click="downloadData()">
            重新下载
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="default"
            size="small"
            :loading="transformLoading"
            icon="el-icon-refresh"
            @click="transformData()">
            重新转化
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-wrap" v-loading="loading">
      <el-table
        ref="table"
        :data="manageData"
        border
        width="100%"
        height="100%"
        :highlight-current-row="true"
        @selection-change="handleSelectionChange"
        @row-click="rowClick"
        header-row-class-name="header-row-class-name">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form
              label-position="right"
              inline
              class="demo-table-expand"
              style="display: none">
              <el-form-item label="所属平台">
                <span>{{ props.row.salesPlatform }}</span>
              </el-form-item>
              <el-form-item label="三方平台订单ID">
                <span>{{ props.row.orderThirdId }}</span>
              </el-form-item>
              <el-form-item label="店铺单号">
                <span>{{ props.row.shopNumber }}</span>
              </el-form-item>
            </el-form>
            <el-form
              label-position="right"
              label-width="100px"
              size="medium"
              class="demo-table-expand">
              <el-form-item label="失败原因：">
                <span
                  style="
                    background-color: #f8f8f9;
                    display: block;
                    padding: 0 13px 0 13px;
                  ">
                  {{ props.row.failReason }}
                </span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          type="selection"
          width="55"
          header-align="center"
          align="center"></el-table-column>
        <el-table-column
          label="序号"
          type="index"
          width="50"
          align="center"
          header-align="center"></el-table-column>
        <el-table-column
          label="namespace"
          prop="namespace"
          header-align="center"
          align="center"
          width="180"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column
          label="所属平台"
          prop="salesPlatform"
          header-align="center"
          align="center"
          width="180"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column
          label="店铺简称"
          prop="shopShortName"
          header-align="center"
          align="center"
          width="200"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column
          label="三方平台订单ID"
          prop="orderThirdId"
          width="200"
          header-align="center"></el-table-column>
        <el-table-column
          label="店铺单号"
          prop="shopNumber"
          header-align="center"
          align="center"
          width="200"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column
          label="失败类型"
          prop="failType"
          header-align="center"
          align="center"
          min-width="50"
          :show-overflow-tooltip="true">
          <template #default="{ row }">
            {{ ['下载失败', '转化失败'][row.failType - 1] }}
          </template>
        </el-table-column>
        <el-table-column
          label="失败原因"
          prop="failReason"
          header-align="center"
          align="center"
          min-width="160"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime"
          header-align="center"
          align="center"
          width="160"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          width="55"
          fixed="right">
          <template slot-scope="scope">
            <i
              style="cursor: pointer; color: #f56c6c"
              class="el-icon-delete"
              @click="deleteData(scope.row)"></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        layout="sizes, total, prev, pager, next, jumper"
        background
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="sizeChange"
        @current-change="onCurrentChange"></el-pagination>
    </div>
  </div>
</template>
<script>
import {
  listTableData,
  downloadData,
  convertOrderAgain,
  deleteData, // eslint-disable-line no-unused-vars
  listShopPlateformData
} from '@/common/api/operation/lossOrder'
export default {
  name: 'lossOrderManage',
  data() {
    return {
      failTypes: [
        { id: 1, value: '下载失败' },
        { id: 2, value: '转化失败' }
      ],
      manageData: [],
      searchForm: {},
      total: 0,
      pageSize: 50,
      currentPage: 1,
      loading: false,
      searchLoading: false,
      downloadLoading: false,
      delLoading: false,
      transformLoading: false,
      selection: [],
      plateformList: []
    }
  },
  async created() {
    this.getList()
    this.getShopPlateform()
  },
  methods: {
    async getList() {
      this.loading = true
      this.searchLoading = true
      try {
        const res = await listTableData({
          ...this.searchForm,
          createTimeStart:
            this.searchForm.createTimeText && this.searchForm.createTimeText[0],
          createTimeEnd:
            this.searchForm.createTimeText && this.searchForm.createTimeText[1],
          currentPage: this.currentPage,
          pageSize: this.pageSize
        })
        this.manageData = res.data.records
        this.total = res.data.total
        this.searchLoading = this.false
      } catch (e) {
        console.error(e)
      } finally {
        this.searchLoading = this.false
        this.loading = false
      }
    },
    async getShopPlateform() {
      const res = await listShopPlateformData()
      this.plateformList = res.data
    },
    search() {
      this.getList()
    },
    async downloadData(row) {
      let ids = []
      let arr = [] // eslint-disable-line no-unused-vars
      if (row) {
        arr.push(row)
      } else {
        arr = this.selection
      }
      console.log(this.selection)
      if (arr.length === 0) {
        this.$message.error('请至少选择一条记录')
        return
      }
      try {
        await this.$confirm('确认重新下载？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch {
        return
      }
      this.downloadLoading = true
      ids = this.selection.map((item) => item.id)
      ids = ids.join()
      const l = this.$loading({
        background: 'rgba(0, 0, 0, 0.3)'
      })
      try {
        await downloadData(ids)
        this.selection = []
        this.getList()
      } catch (e) {
        console.error(e)
      } finally {
        l.close()
        this.downloadLoading = false
      }
    },
    async transformData(row) {
      let ids = []
      let arr = [] // eslint-disable-line no-unused-vars
      if (row) {
        arr.push(row)
      } else {
        arr = this.selection
      }
      console.log(this.selection)
      if (arr.length === 0) {
        this.$message.error('请至少选择一条记录')
        return
      }
      try {
        await this.$confirm('确认重新转化？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch {
        return
      }
      this.transformLoading = true
      ids = this.selection.map((item) => item.id)
      ids = ids.join()
      const l = this.$loading({
        background: 'rgba(0, 0, 0, 0.3)'
      })
      try {
        await convertOrderAgain(ids)
        this.selection = []
        this.getList()
      } catch (e) {
        console.error(e)
      } finally {
        this.transformLoading = false
        l.close()
      }
    },
    async deleteData(row) {
      let ids = []
      let arr = [] // eslint-disable-line no-unused-vars
      if (row) {
        arr.push(row)
      } else {
        arr = this.selection
      }
      console.log(this.selection)
      if (arr.length === 0) {
        this.$message.error('请至少选择一条记录')
        return
      }
      try {
        await this.$confirm('确认删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch {
        return
      }
      if (!row) this.delLoading = true
      ids = this.selection.map((item) => item.id)
      ids = ids.join()
      const l = this.$loading({
        background: 'rgba(0, 0, 0, 0.3)'
      })
      try {
        await deleteData(ids)
        this.selection = []
        this.getList()
      } catch (e) {
        console.error(e)
      } finally {
        l.close()
        if (!row) this.delLoading = false
      }
    },
    handleSelectionChange(selection) {
      this.selection = selection
    },
    onCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getList()
    },
    sizeChange(pageSize) {
      this.pageSize = pageSize
      this.getList()
    },
    rowClick(row) {
      if (this.selection.length === 1 && this.selection[0] === row) {
        this.selection = []
        this.$refs.table.clearSelection()
      } else {
        this.selection = [row]
        this.$refs.table.clearSelection()
        this.$refs.table.toggleRowSelection(row, true)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.saas-manage {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  &::v-deep {
    .el-table .el-table__cell {
      padding: 6px 0;
    }
    .el-input__inner {
      padding: 0 4px;
    }
    .el-input--small .el-input__inner {
      height: 30px;
      line-height: 30px;
    }
    .el-icon-time:before {
      content: '';
    }
    .el-dialog__footer {
      text-align: center;

      .el-button--small {
        padding: 9px 50px;
      }
    }
    .el-dialog__body {
      padding: 10px 20px;
    }
    .el-icon-edit:before {
      color: #ff9800;
      font-weight: bold;
    }

    .el-range-editor--small .el-range-separator {
      line-height: 31px;
    }

    .header-row-class-name th {
      background-color: #f8f8f9;
    }

    .el-input-group__append {
      padding-left: 0;
    }
  }
}

.search {
  background: #fff;
}

.table-wrap {
  background: #fff;
  flex: 1;
  overflow: hidden;
}

.demo-table-expand {
  font-size: 0;
  //padding: 0 20px 0 20px;
}

.el-form-item__label {
  width: 90px !important;
  color: #99a9bf !important;
}
</style>
