<template>
  <el-main class="bg_white">
    <div class="m-t-10 table_90 border-r-10 text-black f-12">
      <el-row>
        <el-col :span="8">
          <el-button type="primary" size="mini" @click="getList()">搜索</el-button>
          <el-button type="primary" size="mini" @click="resetVal">重置</el-button>
        </el-col>
        <el-col :span="16" class="text-r">
          <el-button type="primary" size="mini" @click="batchExport">导出</el-button>
        </el-col>
      </el-row>
    </div>
    <!--表格-->
    <div class="m-t-10 table_90 p-b-20 border-r-10 text-black f-12">
      <vxe-table border resizable show-overflow ref="xTable" height="700" :scroll-x="{ enabled: false }"
        :scroll-y="{ enabled: false }" :data="data.tableData" :edit-config="{ trigger: 'click', mode: 'cell' }">
        <vxe-colgroup title="产品名" header-align="center">
          <vxe-column field="product_name">
            <template #header>
              <el-input size="mini" v-model="data.form_requst.product_name" @keydown.enter="getList"></el-input>
            </template>
          </vxe-column>
        </vxe-colgroup>
        <vxe-colgroup title="SPU" header-align="center">
          <vxe-column field="spu">
            <template #header>
              <el-input size="mini" v-model="data.form_requst.spu" @keydown.enter="getList"></el-input>
            </template>
          </vxe-column>
        </vxe-colgroup>

        <vxe-colgroup title="SKU" header-align="center">
          <vxe-column field="sku">
            <template #header>
              <el-input size="mini" v-model="data.form_requst.sku" @keydown.enter="getList"></el-input>
            </template>
          </vxe-column>
        </vxe-colgroup>
        <vxe-colgroup title="变更人" header-align="center">
          <vxe-column field="user" header-align="center">
            <template #header>
              <el-input size="mini" v-model="data.form_requst.user" @keydown.enter="getList"></el-input>
            </template>
          </vxe-column>
        </vxe-colgroup>
        <vxe-colgroup title="变更时间" header-align="center">
          <vxe-column field="create_time" header-align="center">
            <template #header>
              <el-date-picker v-model="data.form_requst.create_time" type="date" placeholder="请选择变更时间"
                value-format="YYYY-MM-DD" size="mini" style="width: 100%" @change="getList"></el-date-picker>
            </template>
          </vxe-column>
        </vxe-colgroup>
        <vxe-colgroup title="变更对象" header-align="center">
          <vxe-column field="object" header-align="center">
            <template #header>
              <el-select v-model="data.form_requst.object" placeholder clearable filterable size="mini"
                @clear="clear()">
                <el-option v-for="(item, index) in data.typeList" :key="index" :label="item.name" :value="item.id"
                  @click="getList"></el-option>
              </el-select>
            </template>
          </vxe-column>
        </vxe-colgroup>
        <vxe-column field="before_change" title="变更前" header-align="center"></vxe-column>
        <vxe-column field="after_change" title="变更后" header-align="center"></vxe-column>
        <!-- <vxe-column field="cost_change" title="前后差异" header-align="center" align="right">
          <template #default="{ row }">
            <span v-if="row.cost_change > 0" class="text-red">{{ row.cost_change }}</span>
            <span v-else class="text-green">{{ row.cost_change }}</span>
          </template>
        </vxe-column>
        <vxe-column field="range" title="变更幅度" header-align="center" align="right">
          <template #default="{ row }">
            <span v-if="row.range > 0" class="text-red">{{ row.range }} %</span>
            <span v-else class="text-green">{{ row.range }} %</span>
          </template>
        </vxe-column>
        <vxe-column field="content" title="变更内容" header-align="center" v-allow="'NewCost.NewCostFinance'"></vxe-column> -->
      </vxe-table>
      <el-pagination class="m-t-20 m-b-20" :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.count"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" small>
      </el-pagination>
    </div>
  </el-main>
</template>

<script>
import { onMounted, reactive, getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
export default {
  name: 'logInfo',
  setup () {
    // 生命周期
    onMounted(() => {
      initData()
      getList()
    })
    // 获取实例对象
    const { proxy } = getCurrentInstance()
    let store = useStore()
    let data = reactive({
      tableData: [],
      typeList: [],
      form_requst: {
        language_id: store.state.user.language.id || 1,
        product_name: '',
        sku: '',
        spu: '',
        object: '',
        create_time: '',
        user: '',
        page: 1,
        size: 100,
      },
      count: 0
    })
    //成本列表
    const getList = () => {
      proxy.$http.get('v1/product_logs', data.form_requst).then(res => {
        if (res.status == 200) {
          data.tableData = res.data.data
          data.count = res.data.count
        } else {
          ElMessage({
            type: 'error',
            message: res.message
          })
        }
      })
    }
    // 导出
    const batchExport = () => {
      const loading = proxy.$loading.service({
        lock: true,
        text: '导出列表，可能需要时间较长，请耐心等待...'
      })
      // console.log('导出')
      proxy.$http.showLoading(false).get('v1/product_logs/export', data.form_requst).then(res => {
        if (res.status == 200) {
          // console.log('导出成功',res)
          let path = res.data.url
          let tag_A = document.createElement('a')
          tag_A.style.display = 'none'
          tag_A.href = path
          tag_A.download = ''
          tag_A.click()
          // 判断是否存在说 body
          if (document.body.contains(tag_A)) {
            document.body.removeChild(tag_A)
          }
          loading.close()
        } else {
          // console.log('导出失败')
          loading.close()
        }
      })
    }
    // 初始化数据
    const initData = () => {
      proxy.$http.get('v1/product_logs/object_type_list').then(res => {
        if (res.status == 200) {
          // console.log('变更对象',res.data)
          data.typeList = res.data
        }
      })
    }
    // 页码
    const handleSizeChange = (val) => {
      data.form_requst.size = val
      getList()
    }
    // 分页
    const handleCurrentChange = (val) => {
      data.form_requst.page = val
      getList()
    }
    // 重置
    const resetVal = () => {
      data.form_requst.product_name = ''
      data.form_requst.sku = ''
      data.form_requst.spu = ''
      data.form_requst.object = ''
      data.form_requst.create_time = ''
      data.form_requst.user = ''
      getList()
    }
    return {
      data,
      getList,
      initData,
      batchExport,
      handleSizeChange,
      handleCurrentChange,
      resetVal
    }
  }
}
</script>
<style scoped>
/*新样式*/
.vxe-table--render-default {
  font-size: 12px;
}
::v-deep(.vxe-header--column, .vxe-table--render-default) {
  padding: 5px 0 !important;
}
::v-deep(.vxe-body--column) {
  height: 32px !important;
}
::v-deep(.vxe-table--render-default .vxe-cell) {
  padding-left: 2px;
  padding-right: 2px;
}
::v-deep(.el-input__inner) {
  width: 100% !important;
}
</style>
