<template>
  <div class="app-container">
    <!-- 查询区域 -->
    <el-form :model="queryParams" size="small" inline>
      <el-form-item label="组件名称">
        <el-input v-model="queryParams.componentName" placeholder="请输入组件名称" clearable />
      </el-form-item>

      <el-form-item label="组件类型">
        <el-select v-model="queryParams.componentTypeCode" placeholder="请选择组件类型" clearable>
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="状态">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
          <el-option label="启用" :value="1" />
          <el-option label="停用" :value="0" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" size="mini" @click="getList">查询</el-button>
        <el-button size="mini" @click="resetQuery">重置</el-button>
        <el-button type="success" size="mini" @click="handleAdd">新增组件</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格区域 -->
    <el-table :data="componentList" v-loading="loading" border>
      <el-table-column label="ID" prop="id" width="70" />

      <el-table-column label="缩略图" width="100">
        <template slot-scope="scope">
          <img
            v-if="scope.row.previewImage"
            :src="scope.row.previewImage"
            style="width: 70px; height: 45px; object-fit: cover; border-radius: 4px;"
          />
          <i
            v-else
            :class="scope.row.icon || 'el-icon-picture'"
            style="font-size: 22px;"
          />
        </template>
      </el-table-column>

      <el-table-column label="组件编码" prop="componentCode" />
      <el-table-column label="组件名称" prop="componentName" />
      <el-table-column label="组件类型" prop="componentTypeCode" />
      <el-table-column label="状态" width="120">
        <template slot-scope="scope">
          <el-switch
            :value="scope.row.status === 1"
            @change="val => handleChangeStatus(scope.row, val)"
          />
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark" />

      <el-table-column label="操作" width="220">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handleEdit(scope.row)">修改</el-button>
          <el-button type="text" size="mini" style="color:#F56C6C" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/修改弹窗 -->
    <el-dialog :title="title" :visible.sync="open" width="650px" append-to-body>
      <el-form :model="form" label-width="100px">
        <el-form-item label="组件编码">
          <el-input v-model="form.componentCode" placeholder="请输入组件编码" />
        </el-form-item>

        <el-form-item label="组件名称">
          <el-input v-model="form.componentName" placeholder="请输入组件名称" />
        </el-form-item>

        <el-form-item label="组件类型">
          <el-select v-model="form.componentTypeCode" placeholder="请选择组件类型" style="width:100%">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="图标">
          <el-input v-model="form.icon" placeholder="请输入 icon" />
        </el-form-item>

        <el-form-item label="缩略图">
          <el-input v-model="form.previewImage" placeholder="请输入缩略图地址" />
        </el-form-item>

        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
        <el-button size="mini" @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listComponentTypeOptions,
  listDecorationComponent,
  getDecorationComponent,
  saveDecorationComponent,
  delDecorationComponent,
  changeDecorationComponentStatus
} from '@/api/decoration/decoration'

export default {
  name: 'DecorationComponentList',
  data() {
    return {
      loading: false,
      open: false,
      title: '',
      typeOptions: [],
      componentList: [],
      queryParams: {
        componentName: '',
        componentTypeCode: '',
        status: null
      },
      form: {
        id: null,
        componentCode: '',
        componentName: '',
        componentTypeCode: '',
        icon: '',
        previewImage: '',
        status: 1,
        remark: ''
      }
    }
  },
  created() {
    this.getTypeOptions()
    this.getList()
  },
  methods: {
    /**
     * 加载组件类型下拉
     */
    getTypeOptions() {
      listComponentTypeOptions().then(res => {
        this.typeOptions = res.data || []
      })
    },

    /**
     * 查询组件列表
     */
    getList() {
      this.loading = true
      listDecorationComponent(this.queryParams).then(res => {
        this.componentList = res.data || []
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    /**
     * 重置查询条件
     */
    resetQuery() {
      this.queryParams = {
        componentName: '',
        componentTypeCode: '',
        status: null
      }
      this.getList()
    },

    /**
     * 重置表单
     */
    resetForm() {
      this.form = {
        id: null,
        componentCode: '',
        componentName: '',
        componentTypeCode: '',
        icon: '',
        previewImage: '',
        status: 1,
        remark: ''
      }
    },

    /**
     * 新增组件
     */
    handleAdd() {
      this.resetForm()
      this.title = '新增组件'
      this.open = true
    },

    /**
     * 修改组件
     */
    handleEdit(row) {
      getDecorationComponent(row.id).then(res => {
        this.form = res.data
        this.title = '修改组件'
        this.open = true
      })
    },

    /**
     * 提交表单
     */
    submitForm() {
      saveDecorationComponent(this.form).then(() => {
        this.$message.success('保存成功')
        this.open = false
        this.getList()
      })
    },

    /**
     * 删除组件
     */
    handleDelete(row) {
      this.$confirm('确认删除该组件吗？', '提示', { type: 'warning' }).then(() => {
        return delDecorationComponent(row.id)
      }).then(() => {
        this.$message.success('删除成功')
        this.getList()
      })
    },

    /**
     * 修改组件状态
     */
    handleChangeStatus(row, val) {
      changeDecorationComponentStatus({
        id: row.id,
        status: val ? 1 : 0
      }).then(() => {
        this.$message.success('状态修改成功')
        this.getList()
      })
    }
  }
}
</script>
