<!--
<env-list></env-list>
import envList from '@/components/env/env-list.vue';
-->
<template>
  <div>
    <div class="search-wrap m-b-20 flex flex-space-between">
      <el-input
        v-model="searchValue"
        clearable
        class="w-320 serach"
        placeholder="请输入发布版本"
        @keyup.native="value => searchData(value)"
        @clear="clearInput">
        <i
          slot="prefix"
          class="el-input__icon el-icon-search" />
      </el-input>
      <el-button
        type="primary"
        @click="editEnv">
        新建环境
      </el-button>
    </div>
    <div class="table-wrap">
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="sceneName"
          label="环境名称"
          show-overflow-tooltip />
        <el-table-column
          label="环境code"
          show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.sceneCode }}
          </template>
        </el-table-column>
        <el-table-column
          label="环境域名"
          show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.domainUrl }}
          </template>
        </el-table-column>
        <el-table-column
          label="默认环境"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.defaultFlag"
              active-text=""
              inactive-text=""
              @change="changeEnv(scope.row, scope.row.defaultFlag)" />
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <div class="color-606266 line-18">
              {{ scope.row.createTime | timeStampToYmd }}
            </div>
            <div class="color-606266 line-18">
              {{ scope.row.createTime | timeStampToHms }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleEdit(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button
              type="text"
              @click="handleDel(scope.$index, scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="pagination text-right m-t-14" v-if="!!totalCount">
        <dm-pagination small :page-size="pageSize" :current-page="currentPage" layout="prev, pager, next" :total="totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange"> </dm-pagination>
      </div> -->
    </div>
    <new-env
      :edit-row="editRow"
      :show-dialog="showDialog"
      @hideDialog="hideDialog" />
  </div>
</template>
<script>
import newEnv from '@/components/env/new-env.vue';
import { getRequest } from '@/api/api';
import { _debounce } from '@/assets/js/public';
import showMsg from '@/assets/js/showmsg';
import errMsg from '@/assets/js/error';
export default {
  name: 'EnvList',
  components: {
    newEnv
  },
  data() {
    return {
      searchValue: '',
      loading: true,
      tableData: [
        // {
        //   sceneName: '测试',
        //   sceneCode: '234',
        //   domainUrl: 'http://123.com',
        //   defaultFlag: false,
        //   createTime: 1564455643252
        // }
      ],
      /* pageSize: 20,
      currentPage: 1,
      totalCount: 0, */
      showDialog: false,
      editIndex: '',
      editRow: {}
    };
  },
  mounted() {
    const that = this;
    that.getData();
  },
  methods: {
    /**
     * @description: 编辑环境
     * @author: 无尘
     */
    editEnv() {
      const that = this;
      that.showDialog = true;
    },
    hideDialog(obj) {
      const that = this;
      if (!obj) {
        that.editIndex = '';
        that.editRow = {};
        that.showDialog = false;
        return false;
      }
      if (that.editRow.sceneCode) {
        that.tableData[that.editIndex].sceneName = obj.sceneName;
        that.tableData[that.editIndex].domainUrl = obj.domainUrl;
        that.tableData[that.editIndex].defaultFlag = obj.defaultFlag;
      } else {
        that.currentPage = 1;
        that.getData();
      }
      that.currentPage = 1;
      that.getData();
      that.editIndex = '';
      that.editRow = {};
      that.showDialog = false;
      that.$forceUpdate();
    },
    /**
     * @description: 搜索
     * @author: 无尘
     */
    searchData: _debounce(function(value) {
      const that = this;
      that.currentPage == 1;
      that.getData();
    }, 500),

    /**
     * @description: 搜索清除
     * @author: 无尘
     */
    clearInput() {
      this.currentPage = 1;
      this.getData();
    },
    /**
     * @description: 分页
     * @param {Number} val
     * @author: 无尘
     */
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    /**
     * @description: 编辑
     * @param {Number} index
     * @param {Object} row
     * @author: 无尘
     */
    handleEdit(index, row) {
      const that = this;
      that.editIndex = index;
      that.editRow = row;
      that.showDialog = true;
    },
    /**
     * @description: 删除
     * @param {Number} index
     * @param {Object} row
     * @author: 无尘
     */
    handleDel(index, row) {
      const that = this;
      that
        .$confirm('确定删除该环境?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          that.postDelData(index, row);
        })
        .catch(() => {});
    },
    postDelData(index, row) {
      const that = this;
      let para = {
        sceneCode: row.sceneCode
      };
      getRequest('/gateway-manage/delete-scene', para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            showMsg.showmsg('删除成功', 'success');
            that.tableData.splice(index, 1);
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * @description: 改变默认环境
     * @param {Object} row
     * @param {Boolean} val
     * @author: 无尘
     */
    changeEnv(row, val) {
      const that = this;
      that.postChangeEnv(row, val);
    },
    postChangeEnv(row, val) {
      const that = this;
      let para = {
        defaultFlag: val ? '1' : '0',
        sceneCode: row.sceneCode
      };
      getRequest('/gateway-manage/set-default-scene', para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            showMsg.showmsg('设置成功', 'success');
            that.getData();
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * @description: 获取数据
     * @author: 无尘
     */
    getData() {
      const that = this;
      that.loading = true;
      let para = {};
      getRequest('/gateway-manage/list-all-scene', para)
        .then(res => {
          let resData = res.data;
          that.loading = false;
          if (resData.code == '0000') {
            if (resData.result && resData.result.length) {
              resData.result.forEach(ele => {
                ele.defaultFlag = ele.defaultFlag == 1 ? true : false;
              });
            }
            that.tableData = resData.result || [];
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.loading = false;
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  }
};
</script>
<style lang="less" scoped>
.serach {
  visibility: hidden;
}
.w-320 {
  width: 320px;
}
.m-t-14 {
  margin-top: 14px;
}
</style>
