<template>
  <div class="page-data">
    <page-table
      tabIndex
      :is-level="tableInfo.isLevel"
      :api-url="tableInfo.url"
      :refresh="tableInfo.refresh"
      :data.sync="tableInfo.data"
      :query="filterInfo.query"
      :list-type-info="listTypeInfo"
      :init-curpage="tableInfo.initCurpage"
      :field-list="tableInfo.fieldList"
      :handle="tableInfo.handle"
      @handleClick="handleClick"
    >
      <!--ID/名称-->
      <template v-slot:col-instanceName="scope">
        <p class="table-p table-p-cursor" @click="handleClick('detail',scope.row)">{{scope.row.instanceId}}</p>
        <p class="table-p">{{scope.row.instanceName}}</p>
      </template>
      <!--实例配置-->
      <template v-slot:col-diskType="scope">
        <p class="table-p">{{scope.row.cpu}}核 {{scope.row.memory}}MB {{scope.row.internetMaxBandwidthOut}}Mbps</p>
        <p class="table-p">系统盘：{{scope.row.diskType}}</p>
        <p class="table-p">网络：{{scope.row.net}}</p>
      </template>
      <!--主IPv4地址-->
      <template v-slot:col-publicAddress="scope">
        <p class="table-p">{{scope.row.publicAddress[0]}}(公)</p>
        <p class="table-p">{{scope.row.privateAddress[0]}}(内)</p>
      </template>
      <!--到期时间-->
      <template v-slot:col-expiredTime="scope">
        <p class="table-p">{{scope.row.instanceChargeType}}</p>
        <p class="table-p">{{scope.row.expiredTime}}到期</p>
      </template>
    </page-table>
    <div
      class="ACContent"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="60%"
        >
        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
          <!-- <el-form-item prop="email" label="邮箱" :rules="[
              { required: true, message: '请输入邮箱地址', trigger: 'blur' },
              { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
            ]"
          >
            <el-input v-model="dynamicValidateForm.email"></el-input>
          </el-form-item> -->
          <el-row v-for="(item,index) in dynamicValidateForm.domains" :key="index">
            <el-col span="12">
              <el-form-item prop="name" label="名字">
                <el-input v-model="item.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col span="12">
              <el-form-item prop="email" label="邮箱">
                <el-input v-model="item.email"></el-input>
              </el-form-item>
            </el-col>
            <el-button @click.prevent="removeRow(domain)">删除</el-button>
          </el-row>
          <!-- <el-form-item
            v-for="(domain, index) in dynamicValidateForm.domains"
            :label="'域名' + index"
            :key="domain.key"
            :prop="'domains.' + index + '.value'"
            :rules="{
              required: true, message: '域名不能为空', trigger: 'blur'
            }"
          >
            <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
            <el-button @click="addDomain">新增域名</el-button>
            <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    
  </div>
</template>

<script>
import { message } from "./../../util/item";
export default {
  data() {
    return {
      //搜索相关
      filterInfo: {
        query: {
          regionId:"ap-chengdu"
        }
      },
      //表格相关
      tableInfo: {
        url: this.nozzle.instanceInfoList, //接口地址
        refresh: 1,
        isLevel: true,
        initCurpage: 1,
        data: [],
        fieldList: [
          { label: "ID/名称", value: "instanceName", minWidth: 100, tooltip: true, type: "slot" },
          { label: "状态", value: "instanceState", width: 70 },
          { label: "可用区", value: "zone", width: 100 },
          { label: "实例类型", value: "instanceType", minWidth: 120, tooltip: true },
          { label: "实例配置", value: "diskType", minWidth: 160, tooltip: true, type: "slot" },
          { label: "主IPv4地址", value: "publicAddress", minWidth: 90, tooltip: true, type: "slot" },
          { label: "网络计费模式", value: "internetChargeType", minWidth: 120, tooltip: true },
          { label: "实例时间", value: "expiredTime", minWidth: 120, tooltip: true, type: "slot" },
          { label: "所属项目", value: "parentProject", minWidth: 90, tooltip: true }
        ],
        handle: {
          fixed: "right",
          label: "操作",
          width: "140",
          btList: [
            // { label: "绑定邮箱", size: "small", type: "text", event: "permission", show: true },
            { label: "查看详情", size: "small", type: "text", event: "detail", show: true },
            { label: "查看监控", size: "small", type: "text", event: "monitor", show: true },
          ]
        }
      },
      //列表相关
      listTypeInfo: {

      },
      TableData: [], //表格数据
      pageCurrent: 1, //分页默认显示页
      total: 0, //分页上显示的数据总条数
      pageSize: 10, //分页上显示的每页的条数
      loading: false,
      dialogVisible:false,
      dynamicValidateForm: {
        domains: [{
          name: '',
          mail:''
        }],
        email: ''
      }
    };
  },
  mounted() {
    this.tableInfo.refresh = Math.random();
  },
  methods: {
    //点击事件
    handleClick(event, data) {
      switch(event) {
        //查看详情
        case "detail":
          this.$router.push({
            path:"/ServiceWatch/detail",
            query:{
              instanceId:data.instanceId,
              instanceName:data.instanceName,
              publicAddress:data.publicAddress[0]
            }
          });
          break;
        //查看监控
        case "monitor":
          this.$router.push({
            path:"/ServiceWatch/serverMonitor",
            query:{
              instanceId:data.instanceId,
              instanceName:data.instanceName,
              publicAddress:data.publicAddress[0]
            }
          });
          break;
      }
    },
    removeRow(){

    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: '',
        key: Date.now()
      });
    },
    bindMail(){
      // console.log(11)
      this.dialogVisible =true
    },
    //分页
    sizeChange(val) {
      // 改变每页的条数
      this.pageSize = val;
      this.getTableData();
    },
    currentChange(val) {
      //改变页数
      this.pageCurrent = val;
      this.getTableData();
    },
    // 根据平台获取已配置的预警报警线 可选填站点
    getTableData() {
      this.loading = true;
      this.TableData = [];
      this.$http.post(this.nozzle.instanceInfoList, {
            regionId:'ap-chengdu',
            instanceId:"ins-ctpq7oqv"
        }).then(res => {
          this.loading = false; 
          if(res.data.code === 3000){
            // this.$message({type:'warning',message:'网络差'})
            this.$message({
              message: "网络超时，请刷新后再次请求",
              type: "error"
            });
          }
          if(res.data.code === 200) {
            if(res.data.data.length) {
              this.TableData = res.data.data;
              this.total = res.data.data.length;
            }
          }
        })
    },
  }
};
</script>

<style scoped>
#AlarmConfiguration {
  width: 100%;
  height: 100%;
}
/* 顶部搜索 */
#ACTopSearchBox {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: left;
}
#ACTopSearchBox .el-input {
  width: 250px;
  margin: 0 10px;
}
/* 表格 */
#ACContent {
  width: 100%;
  height: calc(100% - 70px);
  margin-top: 10px;
  background: rgba(53, 53, 53, 0.5);
}
/* 弹窗 */
#DialogSearch {
  width: 100%;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  text-align: left;
}
#DialogSearch .el-input {
  width: 250px;
  margin: 0 10px;
}
#DialogCentent {
  width: 100%;
  height: 600px;
}
/* 内层弹窗 */
.Dialog2List {
  width: 100%;
  height: 60px;
  line-height: 60px;
  box-sizing: border-box;
  text-align: center;
}
.Dialog2List .el-input {
  width: 217px;
}
.Dialog2ListName {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  color: white;
  text-align: center;
}
.Dialog2ListButton {
  height: 40px;
  width: 100px;
  display: inline-block;
  line-height: 40px;
  border-radius: 2px;
  text-decoration: none;
  color: rgb(0, 111, 255);
  background: rgba(255, 255, 255, 0);
  border: 1px solid rgb(0, 111, 255);
  margin: 0 30px;
}
.Dialog2ListButton2 {
  height: 40px;
  width: 100px;
  display: inline-block;
  line-height: 40px;
  border-radius: 2px;
  text-decoration: none;
  color: white;
  background: rgb(0, 111, 255);
  border: 1px solid rgb(0, 111, 255);
  margin: 0 30px;
}
/* .table-p{
  text-align:left;
  line-height: 18;
  font-size: 12px;
} */
</style>

<style >
.el-dialog__body {
  padding-top: 0 !important;
}
</style>