<template>
  <Dialog
    :is-dialog-exist="isShow"
    title="选择商品列表样式"
    :dialog-style="{
      '--dialog-width': '1000px',
      '--dialog-height': '641px',
      '--title-height': '51px'
    }"
    @close-dialog="handleClose"
  >
    <el-container style="padding:20px;">
      <el-header>
        <el-form :inline="true" :model="formdata" class="demo-form-inline">
          <el-form-item label="样式名称">
            <el-input v-model="formdata.name" placeholder="样式名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="onSubmit"
              >提交</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-header>

      <el-main>
        <el-table :data="tempList.tempList" style="width: 100%">
          <el-table-column type="index" label="序号" align="center">
          </el-table-column>
          <el-table-column prop="name" label="模板名称" min-width="500">
            <template slot-scope="{ row }">
              <div class="module-item">
                <div class="img-box">
                  <!-- <img src="" alt="" width="66" height="66" /> -->
                  <el-image
                    :src="row.image"
                    width="66"
                    height="66"
                    fit="contain"
                    :lazy="true"
                  ></el-image>
                </div>
                <div class="info-box">
                  <div>
                    <div class="title bold">{{ row.name }}</div>
                    <div class="date-info">
                      最后更新：{{ row.updateAt }} 创建时间：{{ row.createAt }}
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="date" label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button
                v-if="currentId === scope.row.id"
                type="danger"
                size="small"
                disabled
                plain
              >
                已选择
              </el-button>
              <el-button
                v-else
                type="success"
                size="small"
                plain
                @click="onSelected(scope.row)"
              >
                请选择
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>

      <el-footer style="margin-left:20px">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          :total="total"
          :page-size="20"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-footer>
    </el-container>
  </Dialog>
</template>

<script>
import Dialog from '@/components/Dialog'
import { fetchTemp } from '@/api/app-custom-center/goods-list'

export default {
  name: 'GoodsStyleSelector',

  components: {
    Dialog
  },

  mixins: [],

  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    currentId: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      // 记录选中模块
      selectedItem: [],
      formdata: {
        name: ''
      },
      tableData: [],
      tempList: {},
      pageSize: 20,
      pageCount: 20,
      total: 0,
      page: 1
    }
  },

  computed: {},

  watch: {
    createModuleDialog: function(nVal, oVal) {
      if (nVal === true) {
        this.selectedItem = []
      }
    }
  },

  created() {},

  mounted() {
    this.init()
  },

  methods: {
    init() {
      fetchTemp({ name: this.formdata.name, p: this.page })
        .then(response => {
          const { data } = response
          this.tempList = data['tempList']
          this.total = parseInt(this.tempList.total)
        })
        .catch(error => {
          console.error(error)
        })
    },
    submitForm(formName) {
      this.$emit('submit', this.selectedItem)
    },
    handleClose() {
      this.$emit('close')
    },
    onSubmit() {
      this.init()
    },
    onReset() {},
    onSelected(row) {
      this.$emit('selected', row)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.init()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.init()
    }
  }
}
</script>
<style lang="scss" scoped>
.footer {
  box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.04);
  padding: 12px;
  justify-content: center;
  align-content: center;
  text-align: center;
}

.module-item {
  display: flex;
  .img-box {
    width: 66px;
    height: 66px;
    margin-right: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .info-box {
    display: flex;
    align-items: center;
    .date-info {
      margin-top: 6px;
    }
  }
}
</style>
