<template>
  <div class="app-container">
    <suit-table :view="view" :query="query" ref="table" :list-api="mchListSuit">
      <template #table-operator>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
          >新增</el-button>
        </el-col>
      </template>
      <template v-slot:row-operator="scope">
        <el-button
          size="mini"
          type="text"
          icon="el-icon-edit"
          @click="handleUpdate(scope.row)"
        >修改</el-button>
        <el-button
          size="mini"
          type="text"
          icon="el-icon-delete"
          @click="handleDelete(scope.row)"
        >删除</el-button>
      </template>
    </suit-table>

    <!-- 套餐修改弹窗 -->
    <suit-edit-dialog
      :title="title"
      :open.sync="open"
      :id="row.suitId"
      :init-form="{
        userId: query.userId,
        deviceId: query.deviceId
      }"
      :get-api="mchGetSuit"
      :add-api="mchAddSuit"
      :update-api="mchUpdateSuit"
      @success="getList"
    />
  </div>
</template>

<script>
import DeviceInput from '@/components/Business/Device/DeviceInput.vue'
import { findLabel } from '@/utils'
import { mchAddSuit, mchDelSuit, mchGetSuit, mchListSuit, mchUpdateSuit } from '@/api/mch/suit'
import DeviceLink from '@/components/Business/Device/DeviceLink.vue'
import SuitTable from '@/views/ss/suit/component/SuitTable.vue'
import { $view } from '@/utils/mixins'
import SuitEditDialog from '@/views/ss/suit/component/SuitEditDialog.vue'

export default {
  name: "MchSuit",
  mixins: [$view],
  props: {
    deviceId: {
      type: String,
      default: null,
    },
    query: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  dicts: ['time_unit'],
  computed: {
    // 时长单位
    suitTimeUnit() {
      return (unit) => {
        return findLabel(this.dict.type.time_unit, unit);
      }
    }
  },
  components: { SuitEditDialog, SuitTable, DeviceLink, DeviceInput },
  data() {
    return {
      row: {},
      // 选中数组
      ids: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    mchUpdateSuit,
    mchAddSuit,
    mchGetSuit,
    mchListSuit,
    /** 查询套餐列表 */
    getList() {
      this.$refs.table.getList();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.suitId);
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.row = {}
      this.open = true;
      this.title = "添加套餐";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.row = row;
      this.open = true;
      this.title = "修改套餐";
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal.confirm(`是否确认删除套餐 "${row.name}" ?`).then(function() {
        return mchDelSuit(row.suitId);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
  }
};
</script>
