<template>
  <div class="app-container">
    <suit-table :view="view" :query="query" ref="table" @selection-change="handleSelectionChange">
      <template #table-operator>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['ss:suit:add']"
          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="ids == null || ids.length === 0"
            @click="handleDelete"
            v-hasPermi="['ss:suit:remove']"
          >删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['ss:suit:export']"
          >导出</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)"
          v-hasPermi="['ss:suit:edit']"
        >修改</el-button>
        <el-button
          size="mini"
          type="text"
          icon="el-icon-delete"
          @click="handleDelete(scope.row)"
          v-hasPermi="['ss:suit:remove']"
        >删除</el-button>
      </template>
    </suit-table>

    <!-- 套餐修改弹窗 -->
    <suit-edit-dialog
      :title="title"
      :open.sync="open"
      :id="row.suitId"
      :init-form="{
        userId: query.userId,
        deviceId: query.deviceId
      }"
      @success="getList"
    />

  </div>
</template>

<script>
import { listSuit, getSuit, delSuit, addSuit, updateSuit } from "@/api/ss/suit";
import DeviceInput from '@/components/Business/Device/DeviceInput.vue'
import { findLabel, isEmpty } from '@/utils'
import UserLink from '@/components/Business/SmUser/UserLink.vue'
import UserInput from '@/components/Business/SmUser/UserInput.vue'
import { $view } from '@/utils/mixins'
import DeviceLink from '@/components/Business/Device/DeviceLink.vue'
import { SuitFeeMode, SuitFeeType } from '@/utils/constants'
import SuitEditDialog from '@/views/ss/suit/component/SuitEditDialog.vue'
import SuitTable from '@/views/ss/suit/component/SuitTable.vue'

export default {
  name: "Suit",
  mixins: [$view],
  dicts: ['time_unit', 'suit_fee_mode', 'suit_fee_type'],
  computed: {
    SuitFeeType() {
      return SuitFeeType
    },
    // 时长单位
    suitTimeUnit() {
      return (unit) => {
        return findLabel(this.dict.type.time_unit, unit);
      }
    },
  },
  components: { SuitTable, SuitEditDialog, DeviceLink, UserInput, UserLink, DeviceInput },
  props: {
    query: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      row: {},
      ids: [],
      open: false,
      title: null,
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    /** 查询套餐列表 */
    getList() {
      this.$refs.table.getList();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.row = {};
      this.open = true;
      this.title = "添加套餐";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.row = row;
      this.open = true;
      this.title = "修改套餐";
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const suitIds = row.suitId || this.ids;
      this.$modal.confirm('是否确认删除套餐编号为"' + suitIds + '"的数据项？').then(function() {
        return delSuit(suitIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('ss/suit/export', {
        ...this.queryParams
      }, `suit_${new Date().getTime()}.xlsx`)
    },
    handleSelectionChange(selected) {
      this.ids = selected.map(item => item.suitId);
    }
  }
};
</script>
