<template>
  <div class='wraper'>
    <div class='page_left'>
      <el-tree
        :data='treeData'
        :props='defaultProps'
        highlight-current
        :node-key="'userStatus'"
        current-node-key=''
        @node-click='handleNodeClick'>
        <span class='custom-tree-node' slot-scope='{ node, data }'>
          <span v-html='node.label'></span>
          <span>({{ data.count }})</span>
        </span>
      </el-tree>
    </div>
    <div class='page_right'>
      <!-- <el-form :inline='true' size='mini' :model='searchForm' class='search_form'>
        <el-form-item label='公司名称' prop=''>
          <el-input
            v-model='searchForm.companyName'
            placeholder='公司名称'
            style='width: 120px'
            clearable></el-input>
        </el-form-item>
        <el-form-item label='职位' prop=''>
          <el-input
            v-model='searchForm.job'
            placeholder='职位'
            style='width: 120px'
            clearable></el-input>
        </el-form-item>
        <el-form-item label=''>
          <el-button type='primary' @click='getList()'>查询</el-button>
        </el-form-item>
      </el-form> -->
      <div class='my-table-cont my-flex-1'>
        <my-table
          :sourceData='userData'
          ref='multipleTable'
          :selection='true'
          :tableColumns='tableColumns'
          @selectionChange='selectionChange'
          @current-change='currentTabFn'></my-table>
      </div>
      <pagination
        :setValue='setpaginationOptions'
        :options='paginationOptions' />
    </div>
    <!-- 弹出层 -->
    <el-dialog
      :close-on-click-modal='false'
      title="状态修改"
      :visible.sync='dialogVisible'
      width='500px'>
      <el-form
        label-position='right'
        label-width='130px'
        size='mini'
        :inline='true'
        :model='addcurrencyform'
        ref='addcurrencyform'>
        <el-row type='flex' class='row-bg' justify='center'>
          <el-col>
            <el-form-item label='客户状态' prop='userStatus'>
              <el-select
                v-model='addcurrencyform.userStatus'
                style='width: 164px'
                placeholder='请选择客户状态'
                filterable>
                <el-option
                  v-for='item in continentList'
                  :key='item.userStatus'
                  :label="item.userStatusName"
                  :value='item.userStatus'>
                  {{ item.userStatusName }}
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label='备注信息' prop='remark'>
              <el-input
                type="textarea"
                class="textRemark"
                v-model='addcurrencyform.remark'
                placeholder='请输入备注信息'></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot='footer'>
        <el-button
          @click='dialogVisible = false'
          size='mini'
          style='width: 80px'>
          取消
        </el-button>
        <el-button
          type='primary'
          @click='addCurrency()'
          size='mini'
          style='width: 80px'>
          确认
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { get, post } from '../../common/api/axios'
import MyTable from '@/common/components/base/tableView.vue'

export default {
  name: 'basics_countryCode',
  components: {
    MyTable,
  },
  data() {
    return {
      paginationOptions: {
        currentPage: 1,
        total: 0,
        pageSize: 100,
      },
      userData: [],
      dialogVisible: false,
      addcurrencyform: {
        userStatus: '',
        remark: '',
      },
      userStatusId: '',
      continentList: [],
      selection: [],
      formId: null,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'userStatusName',
      },
      searchForm: {
        companyName: '',
        job: '',
      },
    }
  },
  created() {
    this.getList(1)
    this.loadTreeData()
  },
  computed: {
    tableColumns() {
      return [
        {
          label: '公司名称',
          key: 'companyName',
        },
        {
          label: '职位',
          key: 'job',
        },
        {
          label: '邮箱',
          key: 'email',
        },
        {
          label: '手机号',
          key: 'phoneNumber',
        },
        {
          label: '客户状态',
          key: 'userStatus',
          render: (item) => (
            <span>
              {item.userStatus === 'TOBECOMMUNICATED' ? '待沟通' : item.userStatus === 'FOLLOWINGUP' ? '跟进中' : item.userStatus === 'FINISH' ? '已完成' : ''}
            </span>
          ),
        },
        {
          label: '客户备注',
          key: 'remark',
        },
        {
          label: '创建时间',
          key: 'createTime',
        },
        {
          label: '相关操作',
          key: '',
          width: 80,
          render: (item) => (
            <div>
              {(
                <span class='icon-view icon-edit-view' title='编辑'>
                  <i
                    class='el-icon-edit'
                    onClick={() => this.addDialog(item)}></i>
                </span>
              )}
            </div>
          ),
        },
      ]
    },
  },
  methods: {
    loadTreeData() {
      get('business/user/statusList').then((res) => {
        this.continentList = res.data
        const totalData = res.data.reduce((acc, cur) => {
          return acc + cur.count
        }, 0)
        this.treeData = [
          {
            userStatus: '',
            count: totalData,
            userStatusName: '全部',
          },
          ...res.data,
        ]
      })
    },
    handleNodeClick(data) {
      this.treeStatus = data.userStatus
      this.getList()
    },
    setpaginationOptions(opt) {
      for (const key in opt) {
        this.paginationOptions[key] = opt[key]
      }
      this.getList()
    },
    currentTabFn(val) {
      if (val) {
        this.formId = val.id
      } else {
        this.formId = null
      }
    },
    addDialog(item) {
      console.log(item)
      this.userStatusId = item.id
      this.addcurrencyform = item
      this.dialogVisible = true
    },
    addCurrency(item) {
      post('business/user/changeUserStatus', {
        id: this.userStatusId,
        userStatus: this.addcurrencyform.userStatus,
        remark: this.addcurrencyform.remark,
      }).then((res) => {
        if (res.code === 200) {
          this.loadTreeData()
          this.getList()
          this.dialogVisible = false
          this.$message.success(res.message)
        }
      })
    },
    /**
     * @description {查询}
     */
    getList() {
      const {
        pageSize,
        currentPage,
      } = this.paginationOptions
      post('business/user/list', {
        pageSize,
        currentPage,
        // ...this.searchForm,
        userStatus: this.treeStatus,
      }).then((res) => {
        if (res.code === 200) {
          this.userData = res.data.records
          this.paginationOptions.total = res.data.total
        } else {
          this.$alert(res.message, '错误提示', {
            dangerouslyUseHTMLString: true,
          })
        }
      })
    },
    selectionChange(selection) {
      this.selection = selection
    },
  },
}
</script>
<style lang='scss' scoped>
.wraper {
  height: 100%;
  display: flex;
  overflow: hidden;

  .page_left {
    width: 200px;
    min-width: 200px;
    background: #fff;
    border-radius: 5px;
    margin-right: 10px;
  }

  .page_right {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
  }

  .search_form {
    margin-top: 5px;
    margin-left: 10px;
  }

  .search_form > .el-form-item {
    margin-bottom: 5px;
  }

  .search_form {
    margin-top: 5px;
    margin-left: 10px;
  }

  .content {
    max-height: 61vh;
    overflow: auto;
  }
  .textRemark{
    width: 175%;
    ::v-deep .el-textarea__inner{
      height: 100px;
    }
  }
}
</style>
