<!--
 * @Author: your name
 * @Date: 2020-12-02 10:27:53
 * @LastEditTime: 2020-12-04 09:49:19
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\applicationList\index.vue
-->
<template>
  <div id="ApplicationList">
    <!-- 操作表格栏 -->
    <div class="operators">
      <div class="applyName">
        <span>应用名称</span>
        <el-col :span="16">
          <el-input
            v-model="applyName"
            placeholder="请输入类型名称"
            size="100px"
          ></el-input>
        </el-col>
      </div>
      <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="controls">
        <div
          class="item"
          v-for="(item, index) in operatorControls"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="addApp">
          <div class="add" @click="$parent.componentName = 'addApp'">
              新增应用
          </div>
      </div>
    </div>
    <!-- 表格 -->
    <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 class="introduce">{{ scope.row.name }}</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="发布时间" width="150" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.date }}</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: "清空搜索",
        },
      ],
      applyName: "",
      //所有状态
      status: [
        {
          value: "1",
          label: "全部",
        },
        {
          value: "2",
          label: "上架",
        },
        {
          value: "3",
          label: "下架",
        },
      ],
      // 所有类别
      types: [
        {
          value: "1",
          label: "全部",
        },
        {
          value: "2",
          label: "数字农业",
        },
      ],
      currentType: "全部",
      currentStatus: "全部",
      // 表格数据
      tableData: [
        {
          id: "1",
          type: "类别",
          name: "名称",
          icon: {
            url: "https://onemap.obtdata.com/wx/download/world.png",
            showPreview: false,
          },
          date: "发布时间",
          status: "状态",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    onPreview(url){   
        this.form.coverImg = url
    },
    showPreview(icon) {
      this.currentIcon = icon;
      this.currentIcon.showPreview = true;
    },
    closePreview() {
      this.currentIcon.showPreview = false;
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
#ApplicationList {
  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;
    .applyName,.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;
      }
    }
    .addApp{
      width: 220px;
      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>