<template>
  <div>
    <div style="margin: 10px 0">
      <el-button size="mini"
                 icon="el-icon-plus"
                 type="primary"
                 @click="addAcount">添加</el-button>
      <el-button size="mini"
                 icon="el-icon-delete"
                 type="danger"
                 @click="deletAcount">删除</el-button>
    </div>
    <!-- <el-table :row-key="getRowKey" ref="multipleSelection" @row-dblclick="handleDbClick" border :data="tableData" :row-style="{height: '61px'}"
			style="width: 100%" @selection-change="handleSelectionChange" :header-cell-style="{'text-align': 'center'}"
			:cell-style="{'text-align': 'center'}">
			<el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
			<el-table-column prop="account" label="登录账号"></el-table-column>
			<el-table-column prop="password" label="密码"></el-table-column>
			<el-table-column prop="mobilePhone" label="联系电话"></el-table-column>
		</el-table> -->
    <el-table stripe
              :max-height="tableMaxHeight"
              @cell-dblclick="bccelldblclick"
              :style="{width: '100%'}"
              ref="multipleSelection"
              v-loading="loading"
              border
              :data="tableData"
              :row-key="getRowKey"
              @selection-change="handleSelectionChange"
              :header-cell-style="{'text-align': 'center'}"
              :cell-style="{'text-align': 'center'}">
      <el-table-column type="selection"
                       width="55"
                       :reserve-selection="true"></el-table-column>
      <el-table-column prop="account"
                       label="登录账号"></el-table-column>
      <el-table-column prop="fullName"
                       label="姓名"></el-table-column>
      <el-table-column prop="mobilePhone"
                       label="联系电话"></el-table-column>
    </el-table>
    <el-dialog custom-class="bbsl-location-dialog"
               top="10vh"
               :close-on-click-modal="false"
               :title="title+'（巡查账号）'"
               :visible.sync="showFormDia"
               width="80%"
               :before-close="handleClose">
      <el-form ref="formInfo"
               :rules="rules"
               :model="params"
               label-width="150px">
        <el-form-item label="账号："
                      prop="account">
          <el-input style="width: 30%"
                    size="mini"
                    clearable
                    placeholder="请输入账号"
                    v-model="params.account">
          </el-input>
          <span class="white"></span>
          <el-button type="primary"
                     @click="handleAdd()">
            选择账号
            <i class="el-icon-arrow-down el-icon-plus"></i>
          </el-button>
          <!-- <el-dropdown trigger="click"
                       @command="addAccount">
            <el-button type="primary">
              <i class="el-icon-arrow-down el-icon-plus"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="item"
                                v-for="(item,index) in accountOptions"
                                :key="index">账号：{{item.account}}&emsp;姓名：{{item.fullname}} &emsp;联系电话：{{item.mobile}}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
          <el-dialog custom-class="bbsl-location-dialog"
                     top="10vh"
                     :close-on-click-modal="false"
                     :title="title1+'（巡查账号）'"
                     :visible.sync="showTableDia"
                     width="50%"
                     :before-close="handleTableClose">
            <el-table :data="accountOptions"
                      :header-cell-style="{'text-align': 'center'}"
                      :cell-style="{'text-align': 'center'}"
                      @row-click="handleEdit">
              <el-table-column type="index"
                               width="50">
              </el-table-column>
              <el-table-column prop="account"
                               label="账号"
                               width="120">
              </el-table-column>
              <el-table-column prop="fullname"
                               label="姓名"
                               width="120">
              </el-table-column>
              <el-table-column prop="mobile"
                               label="联系电话">
              </el-table-column>
            </el-table>
          </el-dialog>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input style="width: 30%"
                    size="mini"
                    clearable
                    placeholder="请输姓名"
                    v-model="params.fullName"></el-input>
        </el-form-item>
        <el-form-item label="联系电话："
                      prop="mobilePhone">
          <el-input style="width: 30%"
                    size="mini"
                    clearable
                    placeholder="请输入联系电话"
                    oninput="value=value.replace(/[^\d]/g,'')"
                    maxlength="11"
                    v-model="params.mobilePhone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="goInfo">保 存</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import req from '@/request.js'
import latitude from '@/mixins/latitude'
import capacity from '@/api/reservoirManagement/resFrom.js'
import uc from '@/api/uc.js'
import {
  TableMixin
} from '@/mixins/tableMixin'
import {
  mapState
} from 'vuex'
export default {
  props: {
    rscd: {
      type: String,
      default: '',
    },
    stateTitlt: {
      type: String,
      default: '',
    }
  },
  mixins: [TableMixin],
  data () {
    return {
      tableData: [],
      title: '新增',
      title1: "选择",
      showFormDia: false,
      showTableDia: false,
      multipleSelection: [],
      multipleSelections: [],
      params: {
        rscdId: null,
        account: null,
        password: null,
        mobilePhone: null,
        fullName: null,
      },
      accountOptions: [],
      loading: false,
      rules: {
        account: [{
          required: true,
          message: '请输入账号',
          trigger: ['change', 'blur'],
        },],
        mobilePhone: [{
          required: true,
          message: '请输入联系电话',
          trigger: 'blur',
        },],
      }
    }
  },
  created () {
    this.params.rscdId = this.rscd
    this.getResInsList()
    // 获取用户数据
    uc.getAllUser().then(res => {
      this.accountOptions = res
      console.log(res);
    })
  },
  methods: {
    // 账号添加
    handleAdd () {
      this.showTableDia = true;
    },
    // addAccount (command) {
    //   this.params.account = command.account;
    //   this.params.fullname = command.fullname;
    //   this.params.mobilePhone = command.mobile;
    //   console.log(command);
    // },
    //指定一个key标识这一行的数据
    getRowKey (row) {
      return row.id
    },
    handleSelectionChange (val) {
      this.multipleSelection = val.map((item) => {
        return item.id
      })
    },
    addAcount () {
      this.showFormDia = true
      this.title = '新增'
    },
    handleClose () {
      this.showFormDia = false
    },
    handleTableClose () {
      this.showTableDia = false
    },
    // 点击获取一行数据
    handleEdit (row) {
      console.log(row);
      this.params.account = row.account;
      this.params.fullName = row.fullname;
      this.params.mobilePhone = row.mobile;
      this.handleTableClose();
    },
    deletAcount () {
      capacity.deleteResIns(this.multipleSelection, res => {
        if (res.state) {
          this.$notify({
            type: 'success',
            message: '删除成功',
            duration: 2000,
            // offset: 80
          })
          this.getResInsList()
        }
      })
    },
    bccelldblclick (row, column, cell, event) {
      console.log(row, column, cell);
      this.showFormDia = true
      this.title = '修改'
      this.params.id = row.id
      this.params.account = row.account
      this.params.fullName = row.fullName
      this.params.password = row.password
      this.params.mobilePhone = row.mobilePhone
    },
    goInfo () {
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          if (this.title == '新增') {
            capacity.addResIns(this.params, res => {
              if (res.state) {
                this.$notify({
                  type: 'success',
                  message: '新增成功',
                  duration: 2000,
                })
                this.getResInsList()
                this.showFormDia = false
              }
            })
          } else if (this.title == '修改') {
            capacity.updateResIns(this.params, res => {
              if (res.state) {
                this.$notify({
                  type: 'success',
                  message: '修改成功',
                  duration: 2000,
                })
                this.getResInsList()
                this.showFormDia = false
                this.params = {
                  rscdId: null,
                  account: null,
                  password: null,
                  mobilePhone: null,
                  fullName: null,
                }
              }
            })
          }

        }
      })

    },
    getResInsList () {
      this.loading = true
      if (this.stateTitlt == '修改') {
        console.log(this.rscd);
        capacity.resInsList(this.rscd, res => {
          if (res.state) {
            this.tableData = res.value
            this.loading = false
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.white {
  margin-left: 12px;
}
</style>
