<template>
  <div class="app-container">
    <div v-show="visible">
      <div class="tab-header webtop">
        <div>资方信息表管理</div>
        <div>
          <el-button type="primary" size="small" @click="handleCreate()">新增</el-button>
          <el-button type="primary" size="small" @click="handleUpdate()">修改</el-button>
          <el-button type="danger" size="small" @click="handleDelete()">删除</el-button>
          <el-button type="success" size="small" @click="handleDaoChu()">导出</el-button>
        </div>
      </div>
      <div class="searchcon">
        <el-button size="small" class="searchbtn" @click="clicksearchShow">{{
          searchxianshitit
        }}</el-button>
        <div v-show="isSearchShow" class="search">
          <el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="100px" class="tab-header">
            <el-form-item label="资方名称">
              <el-input v-model="listQuery.manageName" placeholder="请输入资方名称" clearable class="filter-item" />
            </el-form-item>
            <el-form-item label="联系人">
              <el-input v-model="listQuery.name" placeholder="请输入联系人" clearable class="filter-item" />
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="listQuery.mobile" placeholder="请输入联系电话" clearable class="filter-item" />
            </el-form-item>
            <el-button type="primary" @click="handleFilter">查询</el-button>
          </el-form>
        </div>
      </div>
      <div class="listtop">
        <div class="tit">资方管理信息列表</div>
        <pageye v-show="total > 0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size"
          class="pagination" @pagination="getList" />
      </div>
      <div>
        <el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column width="50px" type="selection" align="center" />
          <el-table-column width="80px" label="编号" type="index" :index="indexMethod" align="center" />
          <el-table-column label="资方名称" align="center">
            <template slot-scope="scope">
              <span class="bluezi" @click="handleCheck(scope.row)">{{scope.row.manageName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="联系人" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="联系电话" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.mobile }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="操作" align="center" width="250px" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button size="mini" type="primary" @click="handleCheck(row)">查看</el-button>
        </template>
      </el-table-column> -->
        </el-table>
      </div>

      <div class="pages">
        <div class="tit" />
        <!-- 翻页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size"
          class="pagination" @pagination="getList" />
      </div>
    </div>
    <zifangguanli-add ref="addAndUpdate" @handleReturn="visible=true" @created="dataCreated" @updated="dataUpdated" />
    <zifangguanli-info ref="info" @handleReturn="visible=true" />
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import {
    basefinbankListPage,
    basefinbankDeleteBySids,
    basefinbankExportExcel
  } from '@/api/jichuxinxi/basefinbank'
  import {
    setuser,
    getuser
  } from '@/utils/baocun'
  import {
    delUser
  } from '@/api/system/user/Auser'
  import Pagination from '@/components/pagination'
  import pageye from '@/components/pagination/pageye'
  import zifangguanliAdd from './zifangguanliAdd.vue'
  import zifangguanliInfo from './zifangguanliInfo.vue'
  export default {
    name: 'zifangguanli',
    components: {
      Pagination,
      pageye,
      zifangguanliAdd,
      zifangguanliInfo
    },

    data() {
      return {
        isSearchShow: false,
        searchxianshitit: '显示查询条件',
        // --按钮菜单-------
        menuState: {
          add: false, // 添加
          edit: false, // 编辑
          delete: false, // 删除
          view: false, // 查看
          audit: false, // 审核
          input: false, // 导入
          output: false, // 导出
          upload: false, // 同步
          release: false // 下发
        },
        // 查询 -----------
        tableKey: 0,
        list: [],
        sids: [],
        // list: [{ title: '蔚县鑫元汽贸有限责任公司' }],
        total: 1,
        FormLoading: false,
        listLoading: false,
        listQuery: {
          current: 1,
          size: 20,
          params: {
            manageName: '',
            name: '',
            mobile: ''
          }
        },
        selectDate: undefined,
        temp: {}, // 添加和修改
        visible: true
        // ------------------------------------
      }
    },
    computed: {
      ...mapGetters([
        'id',
        'roles',
        'rolesIds',
        'departmentId',
        'departmentCode'
      ])
    },
    created() {
      // 初始化变量
      this.init()
      // 加载列表
      this.getList()
    },
    methods: {
      // 搜索条件效果
      clicksearchShow() {
        this.isSearchShow = !this.isSearchShow
        if (this.isSearchShow) {
          this.searchxianshitit = '隐藏查询条件'
        } else {
          this.searchxianshitit = '显示查询条件'
        }
      },
      init() {
        // 根据当前用户. 加载当前页面的按钮权限
        // findButtonByUserId(this.$route.path).then(response => {
        //   if (
        //     response.code === 20000 &&
        //   response.data &&
        //   response.data.length > 0
        //   ) {
        //     this.menuState = ConvertMenuState(response.data) // 处理各按钮显示状态
        //   }
        // })
      },
      // 序号
      indexMethod(index) {
        var pagestart = (this.listQuery.current - 1) * this.listQuery.size
        var pageindex = index + 1 + pagestart
        return pageindex
      },
      // 查询列表信息
      getList() {
        this.listLoading = true
        basefinbankListPage({
          current: this.listQuery.current,
          size: this.listQuery.size,
          params: {
            manageName: this.listQuery.manageName,
            mobile: this.listQuery.mobile,
            name: this.listQuery.name
          }
        }).then((response) => {
          console.log('列表查询结果1：', response)
          console.log('列表查询结果：' + JSON.stringify(response))
          this.listLoading = false
          if (
            response.code === '200' &&
            response.data &&
            response.data.total > 0
          ) {
            this.list = response.data.records
            this.total = response.data.total
          } else {
            this.list = []
            this.total = 0
          }
        })
      },

      // 查询按钮
      handleFilter() {
        this.listQuery.current = 1
        this.getList()
      },
      // 打开添加
      handleCreate() {
        this.$refs.addAndUpdate.openCreate(() => {
          this.visible = false
        })
      },
      // 勾选
      handleSelectionChange(row) {
        const aa = []
        row.forEach((element) => {
          aa.push(element.sid)
          setuser(this.sids)
        })
        this.sids = aa
      },
      // 打开修改
      handleUpdate() {
        if (this.sids.length === 1) {
          this.dialogStatus = 'update'
          this.$refs.addAndUpdate.openUpdate(this.sids[0], () => {
            this.visible = false
          })
        } else if (this.sids.length > 1) {
          this.$notify({
            title: '提示',
            message: '不能选中多个资方信息修改!!',
            type: 'info',
            duration: 2000
          })
        } else {
          this.$notify({
            title: '提示',
            message: '没有选择资方信息!!',
            type: 'error',
            duration: 2000
          })
          return
        }
      },
      // 打开查看
      handleCheck(row) {
        this.$refs.info.openInfo(row.sid, () => {
          this.visible = false
        })
      },
      // 根据本行ID删除数据
      handleDelete() {
        if (this.sids.length > 0) {
          basefinbankDeleteBySids(this.sids).then((response) => {
            console.log('3455', response)
            if (response.code === '200') {
              this.$notify({
                title: '提示',
                message: '删除成功',
                type: 'success',
                duration: 2000
              })
              this.getList()
            } else {
              this.$notify({
                title: '删除失败',
                message: response.msg,
                type: 'error'
              })
            }
          })
        } else {
          this.$notify({
            title: '提示',
            message: '没有选择资方信息!!',
            type: 'error',
            duration: 2000
          })
          return
        }
      },
      // 导出
      handleDaoChu() {
        // this.$confirm('确定要导出数据, 是否继续?', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // })
        basefinbankExportExcel(this.sids).then((res) => {
          const blob = new Blob([res], {
            type: 'application/vnd.ms-excel'
          })
          const objectUrl = URL.createObjectURL(blob)
          window.location.href = objectUrl
          this.$notify({
            title: '提示',
            message: '导出成功',
            type: 'success',
            duration: 2000,
          })
        })
      },
      // 添加修改返回
      AddUpdateReturn() {
        this.visible = true
      },
      // 添加保存完成
      dataCreated() {
        this.visible = true
        this.handleFilter()
      },
      // 修改保存完成
      dataUpdated() {
        this.visible = true
        this.getList()
      }
    }
  }
</script>
<style scoped>
  /deep/ .el-collapse {
    border-top: 0px solid #e6ebf5;
    border-bottom: 0px solid #e6ebf5;
  }

  /deep/ .el-collapse-item__content {
    margin: 0;
    padding: 0;
  }

  /deep/ .el-collapse-item__wrap {
    border-bottom: 0px solid #ebeef5;
  }

  /deep/ .el-collapse-item__header {
    border-bottom: 0px solid #e6ebf5;
  }

  .searchli {
    padding: 5px 100px;
  }
</style>
