<!--
 * @Description : 同步任务列表
 * @Author      : jinxin
 * @Date        : 2023-01-06 17:34:28
-->
<template>
  <el-main class="bg_white">
    <!--表格-->
    <div class="bg_white table_90 m-t-10 border-r-10 text-black f-12">
      <el-row>
        <el-col :span="16">
          <el-button type="primary" size="mini" @click="serachCom">搜索</el-button>
          <el-button type="primary" size="mini" @click="resetSearch">重置</el-button>
          <el-button type="primary" size="mini" @click="synchronizeErp">批量重传</el-button>
        </el-col>
      </el-row>
      <vxe-table class="mytable-style m-t-10" border @checkbox-change="getSelectRow" @checkbox-all="getSelectRow"
        :header-row-style="data.header_style" resizable show-overflow ref="xTable" height="700" auto-resize
        :data="data.tableData" :edit-config="data.editConfig">
        <vxe-column type="checkbox" width="40"></vxe-column>
        <vxe-colgroup title="同步类别" header-align="center" resizable>
          <vxe-column field="type" width="180">
            <template #header>
              <el-select v-model="data.form_requst.type" class="m-2" placeholder="请选择" size="mini">
                <el-option v-for="item in data.syncType" :key="item.id" :value="item.id" :label="item.value" />
              </el-select>
            </template>
          </vxe-column>
        </vxe-colgroup>

        <vxe-colgroup title="规格型号（sku）" header-align="center" resizable>
          <vxe-column field="sku" width="280">
            <template #header>
              <el-input size="mini" v-model="data.form_requst.sku" placeholder="暂无结果"
                @keydown.enter.native="searchList"></el-input>
            </template>
          </vxe-column>
        </vxe-colgroup>

        <vxe-colgroup title="名称" header-align="center" resizable>
          <vxe-column field="name" width="200">
            <template #header>
              <el-input size="mini" v-model="data.form_requst.name" placeholder="暂无结果"
                @keydown.enter.native="searchList"></el-input>
            </template>
          </vxe-column>
        </vxe-colgroup>

        <vxe-colgroup title="同步对象" header-align="center" resizable>
          <vxe-column field="platform" width="180" align="center">
            <template #header>
              <el-select v-model="data.form_requst.platform" class="m-2" placeholder="请选择" size="mini">
                <el-option v-for="item in data.syncObject" :key="item.id" :value="item.id" :label="item.value" />
              </el-select>
            </template>
            <template #default="{row}">
              <div v-if="row.platform == 0">
                <span>{{ '全部' }}</span>
              </div>
              <div v-if="row.platform == 1">
                <span>{{ '金蝶' }}</span>
              </div>
              <div v-if="row.platform == 2">
                <span>{{ '聚水潭' }}</span>
              </div>
              <div v-if="row.platform == 3">
                <span>{{ '领星' }}</span>
              </div>
            </template>
          </vxe-column>
        </vxe-colgroup>

        <vxe-colgroup title="同步状态" header-align="center" resizable>
          <vxe-column field="status" width="150" align="center">
            <template #header>
              <el-select v-model="data.form_requst.status" class="m-2" placeholder="请选择" size="mini">
                <el-option v-for="item in data.syncStatus" :key="item.id" :value="item.id" :label="item.value" />
              </el-select>
            </template>
            <template #default="{row}">
              <div v-if="row.status == 1">
                <span :style="{color: '#D9001B',fontSize:'12px'}">{{ '失败' }}</span>
                <span @click="signClick(row)"
                  :style="{color: '#137AE9',marginLeft:'10px',cursor:'pointer',fontSize:'12px'}">{{ '重传' }}</span>
              </div>
              <div v-if="row.status == 2">
                <span>{{ '成功' }}</span>
              </div>
              <div v-if="row.status == 3">
                <span>{{ '同步中,请稍后刷新' }}</span>
              </div>
            </template>
          </vxe-column>
        </vxe-colgroup>

        <vxe-column title="同步详情" field="msg" header-align="center" width="230" resizable></vxe-column>

        <vxe-colgroup title="同步人" header-align="center" resizable>
          <vxe-column field="admin_name" width="180">
            <template #header>
              <el-input size="mini" v-model="data.form_requst.admin_name" placeholder="暂无结果"
                @keydown.enter.native="searchList"></el-input>
            </template>
          </vxe-column>
        </vxe-colgroup>

        <vxe-colgroup title="同步时间" header-align="center" resizable>
          <vxe-column field="async_time" width="268">
            <template #header>
              <el-date-picker v-model="data.form_requst.async_time" type="daterange" unlink-panels format="YYYY-MM-DD"
                value-format="YYYY-MM-DD" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间"
                size="small" />
            </template>
          </vxe-column>
        </vxe-colgroup>

      </vxe-table>
      <el-pagination :current-page="data.form_requst.page" :page-sizes="[100, 200, 300]"
        :page-size="data.form_requst.size" layout="total, sizes, prev, pager, next, jumper"
        :total="data.form_requst.count" class="m-t-10 m-b-20 table_90" @size-change="handleSizeChange"
        @current-change="handleCurrentChange"></el-pagination>
    </div>
  </el-main>
</template>
  
<script>
import { reactive, onMounted, defineComponent, provide, getCurrentInstance, watch, inject, ref, nextTick } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default defineComponent({
  name: 'syncLogin',
  setup () {
    const { proxy } = getCurrentInstance()
    // 重传 用 当前行 id
    let data = reactive({
      selectList: [],
      tableData: [],
      form_requst: {
        page: 1,
        size: 100,
        count: 0,
        type: 0,
        sku: '',
        name: '',
        platform: 0,
        status: 0,
        msg: '',
        admin_name: '',
        async_time: []
      },
      editConfig: {
        trigger: 'click',
        mode: 'cell'
      },
      header_style: {
        'background-color': '#F5F7FA',
        color: '#606266',
        textAlign: 'center'
      },
      syncType: [{
        id: 0,
        value: '全部'
      }, {
        id: 1,
        value: '产品'
      }, {
        id: 2,
        value: '分类'
      }],
      syncObject: [
        {
          id: 0,
          value: '全部'
        },
        {
          id: 1,
          value: '金蝶'
        },
        {
          id: 2,
          value: '聚水潭'
        },
        {
          id: 3,
          value: '领星'
        }],
      syncStatus: [
        {
          id: 0,
          value: '全部'
        },
        {
          id: 1,
          value: '失败'
        },
        {
          id: 2,
          value: '成功'
        },
        {
          id: 3,
          value: '同步中,请稍后刷新'
        }
      ]
    })
    // 获取选中的行
    const getSelectRow = (selectList) => {
      data.selectList = selectList.records
      // console.log('select ---> ',data.selectList)
    }
    // 生命周期
    onMounted(() => {
      getList()
    })
    let getList = () => {
      // console.log('data.form_requst',data.form_requst)
      proxy.$http.get('v1/product_async_task', data.form_requst).then(res => {
        if (res.status == 200) {
          // console.log('res',res)
          data.form_requst.count = res.data.count
          data.tableData = res.data.data
          // proxy.$message.success(`SKU状态${msg}成功`)
        }
      })
    }
    let serachCom = () => {
      // console.log('search --->',data.form_requst)
      getList()

    }
    let resetSearch = () => {
      data.form_requst.page = 1
      data.form_requst.size = 100
      data.form_requst.count = 0
      data.form_requst.type = 0
      data.form_requst.sku = ''
      data.form_requst.name = ''
      data.form_requst.platform = 0
      data.form_requst.status = 0
      data.form_requst.msg = ''
      data.form_requst.admin_name = ''
      data.form_requst.async_time = []
      getList()
    }
    let synchronizeErp = () => {
      let str = ''
      // console.log('data.selectList',data.selectList)
      if (data.selectList.length > 0) {
        data.selectList.forEach(el => {
          str = str + el.id + ','
        });
        if (str.charAt(str.length - 1) == ',') {
          str = str.slice(0, str.length - 1)
        }
        proxy.$http.post('v1/product_async_task/re_transform/id/' + str).then(res => {
          if (res.status == 200) {
            // console.log('res signClick',res)
            proxy.$message({ type: 'success', message: '重传成功，稍后刷新页面查看结果' })
            getList()
          }
        })
        // console.log('str ---> ',str)
      } else {
        proxy.$message({ type: 'error', message: '请先选择需要批量重传的数据!' })
      }

    }
    let searchList = () => {
      // console.log('search --->',data.form_requst)
      getList()
    }
    let handleSizeChange = (val) => {
      // console.log('size',val)
      data.form_requst.size = val
      getList()
    }
    let handleCurrentChange = (val) => {
      data.form_requst.page = val
      getList()
      // console.log('current',val)
    }
    let signClick = (row) => {
      // console.log('signClick ---> ',row)
      let query = row.id
      // /product_async_task/re_transform
      proxy.$http.post('v1/product_async_task/re_transform/id/' + query).then(res => {
        if (res.status == 200) {
          // console.log('res signClick',res)
          proxy.$message({ type: 'success', message: '重传成功，稍后刷新页面查看结果' })
        }
      })

    }
    return {
      data,
      serachCom,
      resetSearch,
      synchronizeErp,
      searchList,
      handleSizeChange,
      handleCurrentChange,
      signClick,
      getList,
      getSelectRow
    }
  }
})
</script>
<style scoped>
::v-deep(.el-date-editor) {
  width: 248px;
}
::v-deep(.el-range-editor--small.el-input__inner) {
  height: 28px !important;
}
::v-deep(.el-range-editor--small .el-range-separator) {
  line-height: 20px !important;
}
.vxe-table--render-default {
  font-size: 12px;
}
</style>