<template>
  <el-dialog
    :title="维护记录"
    :close-on-click-modal="false"
    :visible.sync="priceView">
    <el-table
      :data="dataList"
      border
      size="mini"
      max-height="400"
      style="width: 100%;">
      <el-table-column
        type="index"
        header-align="center"
        align="center"
        label="序号">
      </el-table-column>
      <el-table-column
        prop="materialCode"
        header-align="center"
        align="center"
        label="物料编码">
      </el-table-column>
      <el-table-column
        prop="costPrice"
        header-align="center"
        align="center"
        label="成本价">
      </el-table-column>
      <el-table-column
        prop="salePrice"
        header-align="center"
        align="center"
        label="销售价">
      </el-table-column>
      <el-table-column
        prop="createTime"
        header-align="center"
        align="center"
        label="创建时间">
      </el-table-column>
      <el-table-column
        prop="createName"
        header-align="center"
        align="center"
        label="创建人">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="usePrice(scope.row)">启用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="closeView">关闭</el-button>
      </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        priceView: false,
        materialCode: '',
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        headers: { 'Token': this.$cookie.get('token') }
      }
    },
    methods: {
      init (materialCode) {
        this.dataList = []
        this.materialCode = materialCode
        this.priceView = true
        this.$nextTick(() => {
          this.$http({
            url: this.$http.adornUrl(`/materialPrice/info`),
            method: 'get',
            params: this.$http.adornParams({
              'page': this.pageIndex,
              'size': this.pageSize,
              'materialCode': materialCode
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataList = data.data
              this.totalPage = data.total
            }
          })
        })
      },
      // 表单提交
      usePrice (price) {
        this.$http({
          url: this.$http.adornUrl(`/materialPrice/use`),
          method: 'post',
          data: price
        }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.$refs.upload.clearFiles()
                  this.activeName = 'first'
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.init(this.materialCode)
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.init(this.materialCode)
      },
      closeView (val) {
        // eslint-disable-next-line no-unused-expressions,no-sequences
        this.priceView = false,
        this.materialCode = '',
        this.dataList = []
        this.$emit('refreshDataList')
      }
    }
  }
</script>

<style scoped>
.tab_box_wraper {
  width: 460px;
}
.file-item {
  border: 1px solid #eee;
  padding: 5px 8px 5px 15px;
}
.file-item-name {
  font-size: 14px;
  color: #333;
}
.el-pagination {
  margin-top: 15px;
  text-align: right;
}
</style>
