<template>
  <div style="padding: 6px">
    <el-card style="margin-bottom: 6px">
      <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="75px"
        style="margin-bottom: -20px">
        <el-form-item label="算法名称" prop="aiSfptName">
          <el-input v-model="queryParams.aiSfptName" clearable placeholder="请输入算法名称" size="small"
            style="width: 150px" />
        </el-form-item>
        <el-form-item label="设备名称" prop="aiSfptDevname">
          <el-input v-model="queryParams.aiSfptDevname" clearable placeholder="请输入设备名称" size="small"
            style="width: 150px" />
        </el-form-item>
        <el-form-item label="算法类型" prop="aiSfptType">
          <el-select v-model="form.aiSfptType" placeholder="请选择算法类型">
            <el-option :value="1" label="算法类型01"></el-option>
            <el-option :value="2" label="算法类型01"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" size="mini" type="primary" @click="getList()">{{ $t('search')
          }}</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="getFrom">{{ $t('reset') }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="padding-bottom: 100px">
      <el-row class="mb8">
        <el-col>
          <el-dropdown>
            <el-button v-hasPermi="['sfpt:Aisfpt:add']" plain size="mini" type="primary" @click="getopen()">新增算法
            </el-button>
          </el-dropdown>
        </el-col>
      </el-row>
      <el-row v-loading="loading" :gutter="30">
        <el-col v-for="(item, index) in AIsfptList" :key="index" :lg="8" :md="12" :sm="12" :xl="6" :xs="24"
          style="margin-bottom: 30px; text-align: center;margin-top: 20px;">
          <el-card :body-style="{ padding: '20px' }" class="card-item" shadow="always">
            <el-row :gutter="10" justify="space-between" type="flex">
              <el-col :span="20" style="text-align: left">
                <el-link :underline="false" style="font-weight: bold; font-size: 16px; line-height: 32px" type="">
                  <svg-icon icon-class="device" />
                  <span style="margin: 0 5px">{{ item.aiSfptDevname }}</span>
                </el-link>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="17">
                <div style="text-align: left; line-height: 40px; white-space: nowrap">
                  <span style="display: inline-block;">
                    <el-tag size="small" type="primary">{{ item.aiSfptName }}</el-tag>
                  </span>
                </div>
                <el-descriptions :column="1" class="descriptions" size="mini" style="white-space: nowrap">
                  <el-descriptions-item label="算法类型">
                    {{ getaiSfptType(item.aiSfptType) }}
                  </el-descriptions-item>
                  <el-descriptions-item label="算法介绍">
                    {{ item.aiSfptIntroduce }}
                  </el-descriptions-item>
                  <el-descriptions-item label="创建时间">
                    {{ parseTime(item.createTime, '{y}-{m}-{d}') }}
                  </el-descriptions-item>
                </el-descriptions>
              </el-col>
            </el-row>
            <el-button-group style="margin-top: 15px">
              <el-button v-hasPermi="['sfpt:Aisfpt:delete']" class="deleteai" icon="el-icon-delete" size="mini"
                style="padding: 5px 10px" type="danger" @click="deleteAisfpt(item.aiSfptId)">删除
              </el-button>
              <el-button v-hasPermi="['sfpt:Aisfpt:list']" icon="el-icon-view" size="mini" style="padding: 5px 15px"
                type="primary" @click="getListAixx(item)">查看
              </el-button>
            </el-button-group>
          </el-card>
        </el-col>
      </el-row>
      <pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum"
        :pageSizes="[12, 24, 36, 60]" :total="total" />
    </el-card>
    <!--添加弹框-->
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" append-to-body width="30%">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="设备名称" prop="aiSfptDevname">
          <el-input v-model="form.aiSfptDevname"></el-input>
        </el-form-item>
        <el-form-item label="算法名称" prop="aiSfptName">
          <el-input v-model="form.aiSfptName"></el-input>
        </el-form-item>
        <el-form-item label="算法介绍" prop="aiSfptIntroduce">
          <el-input v-model="form.aiSfptIntroduce"></el-input>
        </el-form-item>
        <el-form-item label="算法类型" prop="aiSfptType">
          <el-select v-model="form.aiSfptType" placeholder="请选择算法类型">
            <el-option :value="1" label="算法类型01"></el-option>
            <el-option :value="2" label="算法类型01"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="aiSfptRemark">
          <el-input v-model="form.aiSfptRemark" type="textarea"></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 22%">
          <div style="width: 200px">
            <el-button type="primary" @click="submitForm">确定</el-button>
            <el-button @click="cancel">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

import { addAndUpdateDeviceAisfpt, selectDeviceAisfptList, deleteDeviceAisfpt } from "@/api/iot/device";

export default {
  data() {
    return {
      queryParams: {
        aiSfptName: null,
        aiSfptDevname: null,
        aiSfptType: 0,
        pageNum: 1,
        pageSize: 12,
      },
      // 显示搜索条件
      showSearch: true,
      // 遮罩层
      loading: false,
      //数量
      total: 1,
      // 列表数据
      AIsfptList: [],
      //弹框处理
      open: false,
      form: {},
      title: null,
      rules: {
        aiSfptDevname: [
          { required: true, message: '请输入设备名称', trigger: 'blur' },
        ],
        aiSfptName: [
          { required: true, message: '请输入算法名称', trigger: 'blur' },
        ],
        aiSfptType: [
          { required: true, message: '请选择算法类型', trigger: 'blur' },
        ],
      }
    };
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      selectDeviceAisfptList(this.queryParams).then(rp => {
        this.AIsfptList = rp.rows;
        this.total = rp.total;
      })
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          console.log(this.form)
          addAndUpdateDeviceAisfpt(this.form).then(rp => {
            this.$modal.msgSuccess(rp.msg);
            this.open = false;
            this.getFrom();
          })
        }
      });
    },
    getFrom() {
      this.queryParams.pageNum = 1;
      this.queryParams.aiSfptDevname = null;
      this.queryParams.aiSfptType = 0;
      this.queryParams.aiSfptName = null;
      this.form = {};
      this.getList();
    },
    //删除AI算法平台
    deleteAisfpt(aiSfptId) {
      deleteDeviceAisfpt({ aiSfptId: aiSfptId }).then(rp => {
        this.$modal.msgSuccess(rp.msg);
        this.getList();
      })
    },
    //查看AI算法平台
    getListAixx(row) {
      this.form = { ...row }
      this.open = true;
      this.title = '修改信息';
    },
    getopen() {
      this.title = '添加信息';
      this.open = true;
    },
    getaiSfptType(tab) {
      switch (tab) {
        case 1:
          return "算法类型01";
        case 2:
          return "算法类型02";
        default:
          return "-";
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.getFrom();
    },
  },
};
</script>

<style scoped>
.card-item {
  border-radius: 8px;
}

.mb8 {
  margin: 5px 0px;
}
</style>
