<template>
  <div id="agent_account_company">
    <div style="display: flex; margin-bottom: 10px">
      <el-input style="width: 300px" prefix-icon="el-icon-search" v-model="searchEntTaxId" clearable
                placeholder="请输入代账企业税号"></el-input>
      <el-input style="width: 300px; margin-left: 10px" prefix-icon="el-icon-search" v-model="searchEntTaxName"
                clearable
                placeholder="请输入代账企业名称"></el-input>
<!--      <el-select style="margin-left: 10px" v-model="isEffective" placeholder="请选择是否有效">-->
<!--        <el-option-->
<!--            v-for="item in effectiveList"-->
<!--            :key="item.value"-->
<!--            :label="item.label"-->
<!--            :value="item.value">-->
<!--        </el-option>-->
<!--      </el-select>-->
      <el-button style="margin-left: 10px" type="primary" v-on:click="getSearchCoupon">搜索</el-button>
      <el-button style="margin-left: 10px" type="primary" v-on:click="companyInfoShow">新增</el-button>
    </div>
    <div>
      <el-table
          :data="companyList"
          border
          :height="tableHeight">
        <el-table-column
            prop="entTaxId"
            label="代账机构税号"
            width="150">
        </el-table-column>
        <el-table-column
            prop="entName"
            label="代账机构名称"
            width="220"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="address"
            label="代账机构地址"
            width="300"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="defaultFeatureItems"
            label="对应的服务项"
            width="600"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            fixed="right"
            prop="enable"
            label="是否有效"
            width="70">
          <template slot-scope="scope">
            <el-switch
                v-on:change="statusChange(scope.row)"
                v-model="scope.row.enable"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="300"
        >
          <template slot-scope="scope">
            <el-button @click="editCompanyInfo(scope.row)" type="primary">编辑</el-button>
            <el-button @click="openManageUserPage(scope.row)" type="primary">设置管理者</el-button>
            <el-button @click="openBusinessUserPage(scope.row)" type="primary">设置业务人员</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="display: flex; justify-content: flex-end; margin-top: 10px">
      <el-pagination
          @size-change="getNumberPage"
          @current-change="getPageNumber"
          :current-page.sync="pageNumber"
          :page-sizes="[10, 30, 50, 100]"
          :page-size="numberPage"
          layout="total, sizes, prev, pager, next"
          :total="totalPage">
      </el-pagination>
    </div>
    <el-dialog
        title="代账公司信息"
        :visible.sync="isShow"
        width="50%"
        :before-close="companyClose">
      <div style="display: flex; flex-direction: column">
        <div style="display: flex">
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end">
            <span style="text-align: right"><span style="color: red">*</span>代账机构税号：</span>
            <el-input style="width: 200px" v-model="entTaxId" placeholder="请输入代账机构税号"></el-input>
          </div>
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end">
            <span style="text-align: right"><span style="color: red">*</span>代账机构名称：</span>
            <el-input style="width: 200px" v-model="entName" placeholder="请输入代账机构名称"></el-input>
          </div>
        </div>
        <div style="display: flex; margin-top: 5px">
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end">
            <span style="text-align: right"><span style="color: red">*</span>代账机构地址：</span>
            <el-input style="width: 200px" v-model="address" placeholder="请输入代账机构地址"></el-input>
          </div>
          <div style="display: flex; flex: 1; align-items: center; justify-content: flex-end">
            <span style="text-align: right"><span style="color: red">*</span>是否有效：</span>
            <el-select v-model="isEnable" placeholder="请选择是否有效" style="width: 200px">
              <el-option
                  v-for="item in isEnableList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-button @click="companyClose">取 消</el-button>
        <el-button type="primary" @click="setServiceInfo">设置增值服务</el-button>
      </div>
    </el-dialog>
    <el-dialog
        title="增值服务信息"
        :visible.sync="serviceShow"
        width="50%"
        v-on:opened="serviceOpenPage"
        :before-close="serviceInfoClose">
      <div>
        <div style="display: flex; margin-bottom: 10px">
          <el-input style="width: 260px" prefix-icon="el-icon-search" v-model="searchEntName" clearable
                    placeholder="请输入功能服务名"></el-input>
          <el-button style="margin-left: 10px" type="primary" v-on:click="serviceOpenPage">搜索</el-button>
        </div>
        <el-table
            :data="serviceList"
            ref="multipleTable"
            border
            height="400"
            style="width: 100%"
            @selection-change="selectChange">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="featureName"
              label="服务功能名"
              width="230">
          </el-table-column>
          <el-table-column
              prop="featureDesc"
              label="服务功能描述信息"
              width="300">
          </el-table-column>
          <el-table-column
              prop="featureLevel"
              label="服务级别"
              width="80"
              :formatter="getServiceLevel">
          </el-table-column>
          <el-table-column
              prop="limitType"
              label="限制类型"
              width="80"
              :formatter="getLimitType">
          </el-table-column>
        </el-table>
      </div>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-pagination
            @size-change="getServiceNumberPage"
            @current-change="getServicePageNumber"
            :current-page.sync="servicePageNumber"
            :page-sizes="[10, 30, 50, 100, 300, 500]"
            :page-size="serviceNumberPage"
            layout="total, sizes, prev, pager, next"
            :total="serviceTotalPage">
        </el-pagination>
      </div>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-button @click="serviceInfoClose">取 消</el-button>
        <el-button type="primary" @click="saveCompanyInfo">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
        title="设置管理者手机号码"
        :visible.sync="isManagePhone"
        width="30%"
        :before-close="setManagePhoneClose">
      <div>
        <div style="display: flex; justify-content: center; align-items: center">
          <span><span style="color: red">*</span>管理者手机号码：</span>
          <el-input style="width: 200px" v-model="managePhone" clearable placeholder="请输入管理者手机号码"></el-input>
        </div>
      </div>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-button @click="setManagePhoneClose">取 消</el-button>
        <el-button type="primary" @click="setManageUser">确认</el-button>
      </div>
    </el-dialog>
    <el-dialog
        title="业务人员信息"
        :visible.sync="isBusinessUserShow"
        width="50%"
        v-on:opened="getBusinessUserPage"
        :before-close="closeBusinessUserPage">
      <div>
        <div style="display: flex; margin-bottom: 10px">
          <el-input style="width: 260px" prefix-icon="el-icon-search" v-model="searchUserName" clearable
                    placeholder="请输入用户名"></el-input>
          <el-input style="width: 260px; margin-left: 10px" prefix-icon="el-icon-search" v-model="searchUserPhone" clearable
                    placeholder="请输入用户手机号"></el-input>
          <el-button style="margin-left: 10px" type="primary" v-on:click="getBusinessUserPage">搜索</el-button>
          <el-button style="margin-left: 10px" type="primary" v-on:click="isBusinessUser = true">新增</el-button>
          <el-button style="margin-left: 10px" type="primary" v-on:click="deleteUser">删除</el-button>
        </div>
        <el-table
            :data="businessUserList"
            border
            height="400"
            style="width: 100%"
            @selection-change="userSelectChange">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="userName"
              label="用户名"
              width="230"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              prop="userMobile"
              label="用户手机号"
              width="110">
          </el-table-column>
          <el-table-column
              prop="roleRemark"
              label="角色"
              width="130">
          </el-table-column>
          <el-table-column
              prop="createTime"
              label="创建时间"
              width="150">
          </el-table-column>
        </el-table>
      </div>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-pagination
            @size-change="getBusinessUserNumberPage"
            @current-change="getBusinessUserPageNumber"
            :current-page.sync="businessUserPageNumber"
            :page-sizes="[10, 30, 50, 100, 300, 500]"
            :page-size="businessUserNumberPage"
            layout="total, sizes, prev, pager, next"
            :total="businessUserTotalPage">
        </el-pagination>
      </div>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-button @click="closeBusinessUserPage">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
        title="添加业务人员"
        :visible.sync="isBusinessUser"
        width="30%"
        :before-close="closeUserPhonePage">
      <div>
        <div style="display: flex; justify-content: center; align-items: center">
          <span><span style="color: red">*</span>业务人员手机号码：</span>
          <el-input style="width: 200px" v-model="userPhone" clearable placeholder="请输入业务人员手机号码"></el-input>
        </div>
      </div>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-button @click="closeUserPhonePage">取 消</el-button>
        <el-button type="primary" @click="setUserPhone">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import cache from '@/utils/cache'
import { AxiosRequestData } from '@/data/axios_request'
import { GetLimitType, GetServiceLevel } from '@/utils/enumeration'

export default {
  name: 'agent_account_company',
  data() {
    return {
      token: '',
      searchEntTaxId: '',
      searchEntTaxName: '',
      companyList: [],
      ispId: '',
      orgId: '',
      entName: '',
      entTaxId: '',
      address: '',
      tableHeight: '',
      totalPage: 0,
      numberPage: 10,
      pageNumber: 1,
      pageNum: 1,
      pageSize: 10,
      servicePageNumber: 1,
      companyPageSize: 10,
      serviceNumberPage: 10,
      serviceTotalPage: 0,
      isShow: false,
      isEnable: false,
      isEnableList: [
        {
          value: true,
          label: '是'
        },
        {
          value: false,
          label: '否'
        }
      ],
      account: '',
      companyShow: false,
      selectCompanyList: [],
      entTaxIdList: [],
      couponId: '',
      couponTitle: '',
      serviceList: [],
      serviceShow: false,
      searchEntName: '',
      selectServiceList: [],
      needSelectList: [],
      isManagePhone: false,
      managePhone: '',
      isBusinessUserShow: false,
      businessUserList: [],
      searchUserName: '',
      searchUserPhone: '',
      businessUserPageNumber: 1,
      businessUserPageSize: 10,
      businessUserNumberPage: 10,
      businessUserTotalPage: 0,
      isBusinessUser: false,
      userPhone: '',
      userIdList: [],
      isEffective: true,
      effectiveList: [
        {
          value: true,
          label: '是'
        },
        {
          value: false,
          label: '否'
        }
      ]
    }
  },
  created() {
    this.tableHeight = window.innerHeight - 250
    let company = JSON.parse(cache.getSession('company'))
    let user = JSON.parse(cache.getSession('user'))
    this.ispId = company.ispId
    this.token = cache.getToken()
    this.account = user.account
    this.getAgentAccountCompanyPage()
  },
  mounted() {
    this.tableHeight = window.innerHeight - 250
    window.onresize = () => {
      return (() => {
        this.tableHeight = window.innerHeight - 250
      })()
    }
  },
  methods: {
    // 查询优惠券信息
    getSearchCoupon() {
      this.pageNumber = 1
      this.numberPage = 10
      this.getAgentAccountCompanyPage()
    },
    // 获取代记账企业信息
    getAgentAccountCompanyPage: async function () {
      if (this.token) {
        const url = '/marketing/bagent/findPage'
        let response = await AxiosRequestData(
            url,
            this.token,
            {
              entTaxId: this.searchEntTaxId,
              entName: this.searchEntTaxName,
              ispId: this.ispId,
              // enable: this.isEffective,
              pageNum: this.pageNumber,
              pageSize: this.numberPage
            },
            false,
            2
        )
        if (response) {
          if (response.code === 0) {
            this.companyList = response.data.records
            this.totalPage = response.data.total
          }
        }
      }
    },
    // 获取当前页码
    getPageNumber(num) {
      this.pageNumber = num
      this.getAgentAccountCompanyPage()
    },
    // 获取每页显示数据的数量
    getNumberPage(numPage) {
      this.numberPage = numPage
      this.getAgentAccountCompanyPage()
    },
    // 显示代记账企业信息页面
    companyInfoShow() {
      this.isShow = true
    },
    // 保存代记账企业信息
    async saveCompanyInfo() {
      if (this.token) {
        const url = '/marketing/bagent/save'
        let response = await AxiosRequestData(
            url,
            this.token,
            {
              orgId: this.orgId,
              entTaxId: this.entTaxId,
              entName: this.entName,
              address: this.address,
              ispId: this.ispId,
              enable: this.isEnable,
              featureProductItemBOs: this.selectServiceList,
              reqChannel: 4
            },
            false,
            1
        )
        if (response) {
          if (response.code === 0) {
            this.serviceShow = false
            this.isShow = false
            this.$message({
              message: '保存成功！',
              type: 'success'
            })
            await this.getAgentAccountCompanyPage()
          } else {
            this.$message.error(response.msg)
          }
        }
      }
    },
    // 企业信息页面关闭
    companyClose() {
      this.isShow = false
      this.entTaxId = ''
      this.entName = ''
      this.address = ''
      this.isEnable = false
    },
    // 可用状态变化处理
    statusChange(row) {
      this.orgId = row.orgId
      this.entTaxId = row.entTaxId
      this.entName = row.entName
      this.address = row.address
      this.isEnable = row.enable
      this.selectServiceList = JSON.parse(row.defaultFeatureItems)
      this.saveCompanyInfo()
    },
    // 增值服务选择页面打开处理事件
    async serviceOpenPage() {
      await this.getServiceInfo()
      if (this.needSelectList) {
        this.serviceList.forEach((item, index) => {
          this.needSelectList.forEach((selectItem, selectIndex) => {
            if (item.featureId === selectItem.featureId) {
              this.$refs.multipleTable.toggleRowSelection(item)
            }
          })
        })
      }
    },
    // 获取增值服务信息
    async getServiceInfo() {
      if (this.token) {
        const url = '/marketing/valuedFeature/findPage'
        let response = await AxiosRequestData(
            url,
            this.token,
            {
              featureName: this.searchEntName,
              pageNum: this.servicePageNumber,
              pageSize: this.serviceNumberPage,
              reqChannel: 4
            },
            false,
            2
        )
        if (response) {
          if (response.code === 0) {
            this.serviceList = response.data.records
            this.serviceTotalPage = response.data.total
          } else {
            this.$message.error(response.msg)
          }
        }
      }
    },
    // 获取服务信息当前页码
    getServicePageNumber(num) {
      this.servicePageNumber = num
      this.getCompanyInfo()
    },
    // 获取服务信息每页显示数据的数量
    getServiceNumberPage(numPage) {
      this.serviceNumberPage = numPage
      this.getCompanyInfo()
    },
    // 查询企业信息
    getSearchCompany() {
      this.servicePageNumber = 1
      this.serviceNumberPage = 10
      this.getCompanyInfo()
    },
    // 服务信息页面关闭
    serviceInfoClose() {
      this.serviceShow = false
      this.serviceList = []
      this.servicePageNumber = 1
      this.serviceNumberPage = 10
    },
    // 获取服务级别
    getServiceLevel(row, column, cellValue) {
      return GetServiceLevel(row, column, cellValue)
    },
    // 获取限制类型
    getLimitType(row, column, cellValue) {
      return GetLimitType(row, column, cellValue)
    },
    // 企业信息选择触发事件
    selectChange(list) {
      this.selectServiceList = list
      // let listInfo = []
      // list.forEach((item, index) => {
      //   listInfo = listInfo.concat(item.entTaxId)
      // })
      // this.entTaxIdList = listInfo
    },
    // 设置增值服务信息
    setServiceInfo() {
      if (!this.entTaxId) {
        this.$message({
          message: '代账机构税号不能为空！',
          type: 'warning'
        })
        return
      }
      if (!this.entName) {
        this.$message({
          message: '代账机构名称不能为空！',
          type: 'warning'
        })
        return
      }
      if (!this.address) {
        this.$message({
          message: '代账机构地址不能为空！',
          type: 'warning'
        })
        return
      }
      this.serviceShow = true
    },
    // 编辑代记账企业信息
    editCompanyInfo(row) {
      this.orgId = row.orgId
      this.entTaxId = row.entTaxId
      this.entName = row.entName
      this.address = row.address
      this.isEnable = row.enable
      this.needSelectList = JSON.parse(row.defaultFeatureItems)
      this.isShow = true
    },
    // 打开管理人员设置页面
    openManageUserPage(row) {
      this.orgId = row.orgId
      this.isManagePhone = true
    },
    // 设置管理人员
    async setManageUser() {
      if (!this.managePhone) {
        this.$message({
          message: '管理者手机号码不能为空！',
          type: 'warning'
        })
        return
      }
      if (this.token) {
        const url = '/marketing/bagent/saveOrgMr'
        let response = await AxiosRequestData(
            url,
            this.token,
            {
              orgId: this.orgId,
              orgManagerMobile: this.managePhone,
              reqChannel: 4
            },
            false,
            1
        )
        if (response) {
          if (response.code === 0) {
            this.isManagePhone = false
            this.$message({
              message: '保存成功！',
              type: 'success'
            })
          } else {
            this.$message.error(response.msg)
          }
        }
      }
    },
    // 设置管理者手机号码页面关闭
    setManagePhoneClose() {
      this.managePhone = ''
      this.isManagePhone = false
    },
    // 设置业务人员页面显示
    openBusinessUserPage(row) {
      this.orgId = row.orgId
      this.isBusinessUserShow = true
    },
    // 设置业务人员页面关闭
    closeBusinessUserPage() {
      this.orgId = ''
      this.searchUserName = ''
      this.searchUserPhone = ''
      this.businessUserList = []
      this.isBusinessUserShow = false
    },
    // 获取业务人员分页列表信息
    async getBusinessUserPage() {
      if (this.token) {
        const url = '/marketing/bagent/user/findAgentUserPage'
        let response = await AxiosRequestData(
            url,
            this.token,
            {
              orgId: this.orgId,
              userMobile: this.searchUserPhone,
              userName: this.searchUserName,
              pageNum: this.businessUserPageNumber,
              pageSize: this.businessUserNumberPage,
              reqChannel: 4
            },
            false,
            2
        )
        if (response) {
          if (response.code === 0) {
            this.businessUserList = response.data.records
            this.businessUserTotalPage = response.data.total
          } else {
            this.$message.error(response.msg)
          }
        }
      }
    },
    // 获取业务人员信息当前页码
    getBusinessUserPageNumber(num) {
      this.businessUserPageNumber = num
      this.getBusinessUserPage()
    },
    // 获取业务人员信息每页显示数据的数量
    getBusinessUserNumberPage(numPage) {
      this.businessUserNumberPage = numPage
      this.getBusinessUserPage()
    },
    // 业务人员添加页面关闭
    closeUserPhonePage() {
      this.isBusinessUser = false
      this.userPhone = ''
    },
    // 保存业务人员信息
    async setUserPhone() {
      if (!this.userPhone) {
        this.$message({
          message: '业务人员手机号码不能为空！',
          type: 'warning'
        })
        return
      }
      if (this.token) {
        const url = '/marketing/bagent/user/save'
        let response = await AxiosRequestData(
            url,
            this.token,
            {
              agentOrgId: this.orgId,
              addUserMobile: this.userPhone,
              reqChannel: 4
            },
            false,
            1
        )
        if (response) {
          if (response.code === 0) {
            this.isBusinessUser = false
            this.$message({
              message: '保存成功！',
              type: 'success'
            })
            await this.getBusinessUserPage()
          } else {
            this.$message.error(response.msg)
          }
        }
      }
    },
    // 业务人员选择触发事件
    userSelectChange(list) {
      let listInfo = []
      list.forEach((item, index) => {
        listInfo = listInfo.concat(item.agentUserRoleId)
      })
      this.userIdList = listInfo
    },
    // 删除业务人员信息
    async deleteUser() {
      if (this.userIdList.length === 0) {
        this.$message({
          message: '请选择要删除的数据！',
          type: 'warning'
        })
        return
      }
      if (this.token) {
        const url = '/marketing/bagent/user/delete'
        let response = await AxiosRequestData(
            url,
            this.token,
            {
              agentOrgId: this.orgId,
              mobile: this.account,
              agentUserRoleIds: this.userIdList,
              reqChannel: 4
            },
            false,
            1
        )
        if (response) {
          if (response.code === 0) {
            this.$message({
              message: '删除成功！',
              type: 'success'
            })
            await this.getBusinessUserPage()
          } else {
            this.$message.error(response.msg)
          }
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
