<template>
  <div>
    <basicLayout 
      style="padding-top:0 !important"
      ref="basicLayout" 
      formPath="projectChange" 
      tableName="projectTable" 
      idName="sa_projectid" 
      :apiId="{query:20221020143502,del:''}"
      :autoQuery="false"
      :specialKey="[{key:'leader',value:'name'},{key:'tag_sys',value:null}]"
      :detailPath="{path:'/projectChangeDetail',param:{tabIndex:tabIndex}}">
      <template #titleRight>
<!--        <el-divider direction="vertical"></el-divider>
        <el-dropdown size="medium" @command="handleCommand">
          <span class="el-dropdown-link">
            {{tabName}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item,index) in editableTabs" :key="index" :command="item">{{item.title}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>-->
      </template>
      <template #custom >
        <div class="mt-10">
          <label  class="search__label" >范围:</label>
          <el-select class="inline-24" v-model="tabName" placeholder="请选择数据分类" @change="selectChange" size="small" >
            <el-option
            v-for="item in editableTabs"
            :key="item.index"
            :label="item.templetname"
            :value="item.templetid"
          ></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label  class="search__label">项目类型:</label>
          <el-select class="inline-24" v-model="selectParam.projecttype" placeholder="请选择项目类型" @change="selectChange" size="small" clearable>
            <el-option
                v-for="item in projectType"
                :key="item.value"
                :label="item.value"
                :value="item.value">
              <span style="float: left">{{ item.value }}</span>
              <span style="float: right; color: #8492a6; font-size: 12px">{{ item.remarks?item.remarks:'暂无描述' }}</span>
            </el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label  class="search__label">项目等级:</label>
          <el-select class="inline-24" v-model="selectParam.grade" placeholder="请选择项目等级" @change="selectChange" size="small" clearable>
            <el-option
                v-for="item in projectLead"
                :key="item.value"
                :label="item.value"
                :value="item.value">
              <span style="float: left">{{ item.value }}</span>
              <span style="float: right; color: #8492a6; font-size: 12px">{{ item.remarks?item.remarks:'暂无描述' }}</span>
            </el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label  class="search__label">当前项目阶段:</label>
          <el-select class="inline-24" v-model="selectParam.stagename" placeholder="请选择项目阶段" @change="selectChange" size="small" clearable>
            <el-option
                v-for="item in option.stageList"
                :key="item.stagename"
                :label="item.stagename"
                :value="item.stagename">
            </el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label  class="search__label">领域:</label>
          <el-select class="inline-24" v-model="selectParam.tradefield" placeholder="请选择领域" @change="selectChange" size="small" clearable>
            <el-option
                v-for="item in tradefieldSelect"
                :key="item.value"
                :label="item.value"
                :value="item.value">
              <span style="float: left">{{ item.value }}</span>
              <span style="float: right; color: #8492a6; font-size: 12px">{{ item.remarks?item.remarks:'暂无描述' }}</span>
            </el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label  class="search__label">品牌:</label>
          <el-select class="inline-24" v-model="selectParam.brandname" placeholder="请选择品牌" @change="selectChange" size="small" clearable>
            <el-option
                v-for="item in brandSelect"
                :key="item.sa_brandid"
                :label="item.brandname"
                :value="item.brandname">
            </el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label  class="search__label">项目状态:</label>
          <el-select class="inline-24" v-model="selectParam.status" placeholder="请选择项目状态" @change="selectChange" size="small" clearable>
            <el-option
                v-for="item in option.statusTab"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label class="search__label" >创建日期:</label>
          <el-date-picker
              style="margin-right: 24px !important;"
              size="small"
              @change="selectChange"
              value-format="yyyy-MM-dd"
              v-model="dateSelect"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable>
          </el-date-picker>
        </div>
      </template>
      <template v-slot:tbList="scope">
        <div v-if="scope.data.column.columnname === 'status'">
          <span style="color:#52c41a" v-if="scope.data.column.data[[scope.data.column.columnname]] == '跟进中'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#fa8c16" v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '已成交'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#999999" v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '已失败'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
        </div>
        <div v-else-if="scope.data.column.columnname === 'tag_sys'">
          <div v-for="item in scope.data.column.data.tag_sys" :key="item.index"  style="float: left;margin-left: 5px;margin-bottom: 5px">
            <el-tag  color="#3874F6" size="mini" type="primary" effect="dark">
              <span>{{item}}</span>
            </el-tag>
          </div>
          <div v-for="item in scope.data.column.data.tag" :key="item.index"  style="float: left;margin-left: 5px;margin-bottom: 5px">
            <el-tag color="#FA8C16" size="mini" type="warning" effect="dark">
              <span>{{item}}</span>
            </el-tag>
          </div>
        </div>
        <div v-else-if="scope.data.column.columnname === 'leader'">
          {{scope.data.column.data.leader[0] && scope.data.column.data.leader[0].name}}
        </div>
        <div v-else-if="scope.data.column.columnname === 'projecttype'">
          {{scope.data.column.data.projecttype + '-' + scope.data.column.data.projecttype_remarks}}
        </div>
        <div v-else-if="scope.data.column.columnname == 'totalinvestment'">
          <span>{{scope.data.column.data[[scope.data.column.columnname]] ?tool.formatAmount(scope.data.column.data[[scope.data.column.columnname]],2):'--'}}</span>
        </div>
        <div v-else-if="scope.data.column.columnname == 'costofconstruction'">
          <span>{{scope.data.column.data[[scope.data.column.columnname]] ?tool.formatAmount(scope.data.column.data[[scope.data.column.columnname]],2):'--'}}</span>
        </div>
        <div v-else-if="scope.data.column.columnname == 'budgetary'">
          <span>{{scope.data.column.data[[scope.data.column.columnname]] ?tool.formatAmount(scope.data.column.data[[scope.data.column.columnname]],2):'--'}}</span>
        </div>
        <div v-else-if="scope.data.column.columnname == 'signamount_due'">
          <span>{{scope.data.column.data[[scope.data.column.columnname]] ?tool.formatAmount(scope.data.column.data[[scope.data.column.columnname]],2):'--'}}</span>
        </div>
        <div v-else>
          {{scope.data.column.data[[scope.data.column.columnname]]?scope.data.column.data[[scope.data.column.columnname]]:'--'}}
        </div>
      </template>
      <template v-slot:tbOpreation="scope">
      </template>
    </basicLayout>
  </div>
</template>

<script>
export default {
  name: "index",
  provide () {
    return {
      enterpriseList:() => this.enterpriseList,
      projectType:() => this.projectType,
      projectLead:() => this.projectLead,
      projectPanl:() => this.projectPanl
    }
  },
  data() {
    return {
      editableTabsValue:"我负责的",
      /* 企业列表 */
      enterpriseList:'',
      /* 企业列表 */
      projectType:'',
      projectLead:'',
      projectPanl:'',
      statusValue:"全部",
      dateSelect:'',
      options:[],
      option:{
        statusTab:[
          {
            value:"跟进中",
            label:"跟进中"
          },
          {
            value:"已成交",
            label:"已成交"
          },
          {
            value:"已失败",
            label:"已失败"
          }
        ],
        stageList:[

        ]
      },
      brandSelect:[],
      tradefieldSelect:[],
      tabName:"1",
      tabIndex:"1",
      editableTabs: [],
      selectParam: {
        status:'',
        projecttype:'',
        grade:'',
        startdate:'',
        enddate:'',
        stagename:'',
        brandname:"",
        tradefield:"",
      },
    }
  },
  created () {
    /*this.getProjectPanl()*/
    this.getEnterprise()
    this.getSysetms()
    this.queryUserInfo()
    this.stageData()
  },
  methods: {
    /* 获取联系人:负责人列表 */
    async getAccount () {
      let res = await this.$api.requested({
        "id": "20221018150602",
        "content": {
            "sys_enterpriseid": 1,
            "pageNumber": 1,
            "pageSize": 20,
            "where": {
                "condition": ""
            }
        }
      })
    },
    async getSysetms () {
      /* 获取项目类型 */
      let res = await this.$store.dispatch('optiontypeselect','projecttype')
      this.projectType = res.data
      /* 获取项目等级 */
      let res2 = await this.$store.dispatch('optiontypeselect','projectgrade')
      this.projectLead = res2.data
      console.log(this.projectLead);
      
    },
    /** 获取公司数据 */
    async getEnterprise () {
      let res = await this.$api.requested({
        "id": 20221021095802,
        "content": {
            "pageNumber": 1,
            "pageSize": 99999,
            "where": {
                "condition": ""
            }
        },
      })
      this.enterpriseList = res.data
    },
    /* 获取项目模板 */
    /*async getProjectPanl () {
      let res = await this.$api.requested({
        "id": "20221019085604",
        "content": {
            "pageNumber": 1,
            "pageSize": 99999999,
            "where":{
                "condition":""
            }
        }
      })
      this.projectPanl = res.data
    },*/
    handleCommand(command){
      console.log("输出command")
      console.log(command)
      this.tabName = command.title
      this.tabIndex = command.name
      this.queryData(command.name)
    },
    queryData(id){
      console.log("执行")
      this.$refs['basicLayout'].param.content.type = id
      this.$refs['basicLayout'].param.content.isExport = false
      this.$refs.basicLayout.param.content.deleted = 0
      this.$refs['basicLayout'].listData()
    },
    selectChange () {
      console.log(this.projectType)
      console.log(this.projectLead)
      this.tabIndex = this.tabName
      if (this.dateSelect !== '' && this.dateSelect !== null){
        this.selectParam.startdate = this.dateSelect[0]
        this.selectParam.enddate = this.dateSelect[1]
      }else {
        this.selectParam.startdate = ''
        this.selectParam.enddate = ''
      }
      this.$refs.basicLayout.param.content.type = this.tabIndex
      this.$refs.basicLayout.param.content.where = this.selectParam
      this.$refs.basicLayout.listData()
    },
    async queryUserInfo() {
      let res = await this.$api.requested({
        "classname": "common.usercenter.usercenter",
        "method": "queryUserMsg",
        "content": {
        }
      })
      console.log(res.data);

      this.userInfo = {
        isAuth : res.data.hr.isleader,
        userid: res.data.hr.userid
      }
      console.log(this.userInfo,'user')
      window.sessionStorage.setItem('userInfo',JSON.stringify(this.userInfo))
      console.log(JSON.parse(window.sessionStorage.getItem('userInfo')));

    },
    /*获取阶段*/
    async stageData(){
      const res = await this.$api.requested({
        "id": 20221128143604,
        "content": {
          "pageNumber": 1,
          "pageSize": 99,
          "where": {
            "condition": "",
            "allprojecttype":"",
            "projecttype":""
          }
        }
      })
      this.option.stageList = res.data
    },
    /*获取品牌*/
    async queryBrand(){
      const res = await this.$api.requested({
        content: {
          isExport: 0,
          pageNumber: 1,
          pageSize: 20,
          where: {
            condition: "",
            tablefilter: {}
          }
        },
        id: 20220922085103
      })
      this.brandSelect = res.data
    },
    /*获取领域*/
    queryTradefield(){
      this.$store.dispatch('optiontypeselect','tradefield').then(res=>{
        this.tradefieldSelect = res.data
      })
    },
    /*onChangeTab(val){
      console.log(val)
      this.tabIndex = val
      this.queryData(val)
    },
    clearTime () {
      this.$refs['basicLayout'].param.content.where.startdate = ''
      this.$refs['basicLayout'].param.content.where.enddate = ''
      this.$refs['basicLayout'].listData()
    },
    timeChange (time) {
      this.$refs['basicLayout'].param.content.where.startdate = time[0]
      this.$refs['basicLayout'].param.content.where.enddate = time[1]
      this.$refs['basicLayout'].listData()
    }*/
    async querytemplet () {
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.querytemplet.querytemplet",
        "method":"query",
        "content": {}
      })
      this.editableTabs = res.data
      this.tabName = res.data[0].templetid
    }
  },
  mounted () {
    this.queryData(1)
    this.queryBrand()
    this.queryTradefield()
    this.querytemplet()
  }
}
</script>

<style scoped>
</style>