<template>
  <div class="app-container">
    <el-form ref="queryForm" size="small" :inline="true" label-width="94px">
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          size="mini"
          @click="handleAdd"
          >添加优惠券</el-button
        >
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" width="50" label="序号" align="center">
      </el-table-column>
      <el-table-column
        prop="city"
        label="券类型"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="优惠内容"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="province"
        label="使用门槛"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="date"
        label="生效时间"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>

      <el-table-column
        prop="date"
        label="失效时间"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="modify(scope.row, '1')"
            >修改</el-button
          >
          <el-button type="text" size="small">删除</el-button>
          <el-button type="text" size="small" @click="modify(scope.row, '2')"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <!-- 弹出框 -->
    <dialogFile
      :dialogVisible="dialogVisible"
      :title="title"
      @cancle="handleCancleDialog"
      @onSubmit="handleSave"
      :isEdit="isEdit"
    ></dialogFile>
  </div>
</template>

<script>
import dialogFile from "./components/detailFile.vue";
export default {
  name: "orderform",
  components: { dialogFile },
  data() {
    return {
      dialogVisible: false,
      control: "0",
      total: 5,
      title: "添加优惠券",
      queryParams: {
        pageNum: 0,
        pageSize: 10,
      },
      value: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      isEdit:true,//判断添加修改详情的保存按钮是否显示
    };
  },
  created() {},
  methods: {
    // 页码切换
    getList() {},
    handleAdd() {
      let that = this;
      that.title = "添加优惠券";
      that.isEdit = true
      that.dialogVisible = true;
    },
    // 修改详情
    modify(sta, type) {
      let that = this;
      if (type == "1") {
        that.title = "修改优惠券";
        that.isEdit = true
      } else if (type == "2") {
        that.title = "查看优惠券";
        that.isEdit = false
      }
      that.dialogVisible = true;
    },
    //保存
    handleSave(e){
        console.log('表单值',e)
    },
    // 其他 弹窗关闭
    handleCancleDialog() {
      this.dialogVisible = false;
    },
  },
};
</script>