<!--
 * @Author: your name
 * @Date: 2020-12-02 10:27:53
 * @LastEditTime: 2020-12-04 09:49:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\applicationList\index.vue
-->
<template>
  <div id="ApplicationCate">
    <!-- 操作表格栏 -->
    <div class="operators">
      <div class="status">
        <span>所有状态</span>
        <el-select v-model="currentStatus" placeholder="全部">
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="types">
        <span>应用类别</span>
        <el-select v-model="currentType" placeholder="全部">
          <el-option
            v-for="item in types"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="sorts">
        <span>排序</span>
        <el-select v-model="currentSort" placeholder="全部">
          <el-option
            v-for="item in sorts"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="controls">
        <div
          class="item"
          v-for="(item, index) in operatorControls"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="addCate">
          <div class="add" @click="typeManagerVisible = true">
              添加类别
          </div>
      </div>
    </div>
    <!-- 添加类别弹框 -->
    <el-dialog title="添加类别" :visible.sync="typeManagerVisible" append-to-body>
        <div id="addCateManager">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="*应用类别">
                <el-col :span="12">
                    <el-input v-model="form.type" placeholder="请输入资讯标题"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="*封面图">
                <singleImageX :value="form.coverImg" @input="onPreview"></singleImageX>
            </el-form-item>
            <el-form-item label="*简介">
                <el-col :span="12">
                    <el-input v-model="form.introduce" placeholder="请输入资讯简介"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="*排序">
                <el-col :span="12">
                    <el-input v-model="form.sort" placeholder="请输入序号"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button @click="typeManagerVisible=false">取消</el-button>
                <el-button type="primary" @click="onSubmit">确定</el-button>
            </el-form-item>
          </el-form>
        </div>
    </el-dialog>
    <!-- 表格 -->
    <div class="table">
      <el-table :data="tableData" border fit highlight-current-row style="width: 100%">
        <el-table-column label="序号" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="应用类别" width="200" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.type }}</span>
          </template>
        </el-table-column>
        <el-table-column label="详情图" align="center">
          <template slot-scope="scope">
            <span>
              <img
                class="icon"
                :src="scope.row.icon.url"
                @click="showPreview(scope.row.icon)"
              />
            </span>
          </template>
        </el-table-column>
        <el-table-column label="简介" align="center">
          <template slot-scope="scope">
            <span class="introduce">{{ scope.row.introduce }}</span>
          </template>
        </el-table-column>
        <el-table-column label="排序" width="150" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.sort }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="150" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <!-- <span>{{scope.row.operator}}</span> -->
            <span>
              <div class="operators">
                <div class="edit">编辑</div>
                <div class="offshelf">下架</div>
                <div class="delete">删除</div>
              </div>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 使用图片查看器预览当前缩略图 -->
    <el-image-viewer
      v-if="currentIcon.showPreview"
      :on-close="closePreview"
      :url-list="[currentIcon.url]"
    />
  </div>
</template>

<script>
// 导入组件
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import singleImageX from '@/components/Upload/singleImageX';
// 导入请求
import {
  getAllApplicationType,
  getListApplicationType,
  addUpdateApplicationType,
} from "api/website/industryApplication/index";
export default {
  name: "ApplicationList",
  components: {
    ElImageViewer,
    singleImageX
  },
  data() {
    return {
      currentIcon: "",
      // 功能按钮
      operatorControls: [
        {
          name: "搜索",
        },
        {
          name: "清空搜索",
        },
      ],
      //所有状态
      status: [
        {
          value: "1",
          label: "全部",
        },
        {
          value: "2",
          label: "上架",
        },
        {
          value: "3",
          label: "下架",
        },
      ],
      currentStatus: "全部",
      // 所有类别
      types: [
        {
          value: "1",
          label: "全部",
        },
        {
          value: "2",
          label: "数字农业",
        },
      ],
      currentType: "全部",
      // 排序
      sorts: [
        {
          value: "1",
          label: "全部",
        },
        {
          value: "2",
          label: "数字农业",
        },
      ],
      currentSort: '全部',
      // 表格数据
      tableData: [
        {
          id: "1",
          type: "类别",
          icon: {
            url: "https://onemap.obtdata.com/wx/download/world.png",
            showPreview: false,
          },
          introduce: "简介",
          sort: "排序",
          status: "状态",
        },
      ],
      typeManagerVisible: false,
      form:{
        type: '',
        coverImg: '',
        introduce: '',
        sort: '',
      }
    };
  },
  mounted() {},
  methods: {
    onPreview(url){   
        this.form.coverImg = url
    },
    showPreview(icon) {
      this.currentIcon = icon;
      this.currentIcon.showPreview = true;
    },
    closePreview() {
      this.currentIcon.showPreview = false;
    },
    onSubmit() {
        console.log('submit!');
    }
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
#ApplicationCate {
  margin: 0 1% 0 1%;
  width: 98%;
  height: auto;
  #addCateManager{
    padding: 0 5%;
    width: 90%;
    height: auto;
  }
  .operators {
    // margin: 0 1% 0 1%;
    width: 100%;
    height: 68px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    .sorts,.status,.types {
      width: auto;
      height: 46px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      span {
        margin: 0 10px 0 20px;
      }
    }
    .addCate{
      width: 240px;
      height: 46px;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      overflow: hidden;
      .add{
        width: 50%;
        height: 36px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        background-color: #5178F2;
        color: #FFFFFF;
        cursor: pointer;
      }
    }
    .controls {
      margin-left: 40px;
      width: 260px;
      height: 46px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .item {
        width: 120px;
        height: 36px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-weight: 400;
        color: #5178f2;
        border: 1px solid #5178f2;
        border-radius: 5px;
        cursor: pointer;
      }
    }
  }
  .table {
    margin: 1% 1% 0 1%;
    width: 98%;
    height: auto;
    span {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      .icon {
        width: 50px;
        height: 50px;
        object-fit: cover;
      }
      .operators {
        width: 300px;
        height: 46px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        .edit,
        .offshelf,
        .delete {
          width: auto;
          height: 36px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }
        .edit,
        .offshelf {
          color: #1890ff;
        }
        .delete {
          color: #fe4066;
        }
      }
    }
  }
}
</style>
