<template>
  <div class="mod-config">
    <el-dialog
      width="600px"
      :title="!dataForm.id ?  '添加' :'编辑'"
      :close-on-click-modal="false"
      :visible.sync="visible">
      <el-form :inline="true" label-position="top" label-width="100px" :rules="projectRole">
        <el-form-item :label="'项目层级'"  prop="projectLevel" :rules="projectRole.projectLevel">
          <el-select v-model="dataForm.projectLevel" style="width: 130px">
            <el-option label="一级" value=1></el-option>
            <el-option label="二级" value=2></el-option>
            <el-option label="三级" value=3></el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="'项目号'">
          <el-input v-model="dataForm.projectId" style="width: 130px" disabled></el-input>
        </el-form-item>

        <el-form-item prop="projectType" :rules="projectRole.projectType">
          <span slot="label" style="" @click="getBaseList(1010,1)"><a herf="#">项目类型</a></span>
          <el-input v-model="dataForm.projectType" style="width: 130px" readonly  @focus="getBaseList(1010,1)"></el-input>
        </el-form-item>
        <el-form-item prop="customerName" :rules="projectRole.customerName">
          <span slot="label" style="" @click="getBaseList(102,1)"><a herf="#">所属客户</a></span>
          <el-input v-model="dataForm.customerName" style="width: 130px" readonly  @focus="getBaseList(102,1)"></el-input>
        </el-form-item>
      </el-form>

      <el-form :inline="true" label-position="top" label-width="100px" :rules="projectRole">
        <el-form-item :label="'项目名称'" prop="projectName" :rules="projectRole.projectName">
          <el-input v-model="dataForm.projectName" style="width: 562px" ></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" label-width="100px" >
        <el-form-item :label="'项目描述'" >
          <el-input v-model="dataForm.projectDesc" style="width: 562px" ></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" label-width="100px" :rules="projectRole">
        <el-form-item prop="projectSourceDesc" :rules="projectRole.buDesc">
          <span slot="label" style="" @click="getBaseList(106,1)"><a herf="#">BU</a></span>
          <el-input v-model="dataForm.buDesc" style="width: 130px" readonly @focus="getBaseList(106,1)"></el-input>
        </el-form-item>
        <el-form-item prop="projectSourceDesc" :rules="projectRole.projectSourceDesc">
          <span slot="label" style="" @click="getBaseList(1011,1)"><a herf="#">项目来源</a></span>
          <el-input v-model="dataForm.projectSourceDesc" style="width: 130px" readonly @focus="getBaseList(1011,1)"></el-input>
        </el-form-item>
        <el-form-item prop="priorityDesc" :rules="projectRole.priorityDesc" label="优先级">
<!--          <span slot="label" style="" @click="getBaseList(1012,1)"><a herf="#">优先级</a></span>-->
<!--          <el-input v-model="dataForm.priorityDesc" style="width: 130px" readonly  @focus="getBaseList(1012,1)"></el-input>-->
          <dict-data-select dict-type="project_info_priority" style="width: 130px" v-model="dataForm.priority"></dict-data-select>
        </el-form-item>
        <el-form-item :label="'要求日期：'" prop="needDate" :rules="projectRole.needDate">
          <el-date-picker
            style="width: 130px"
            v-model="dataForm.needDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" label-width="100px" :rules="projectRole">
        <el-form-item prop="projectManagerName" :rules="projectRole.projectManagerName">
          <span slot="label" style="" @click="managerChooseModal()"><a herf="#">项目经理</a></span>
          <el-input v-model="dataForm.projectManagerName" readonly style="width: 274px"  @focus="managerChooseModal()"></el-input>
        </el-form-item>
        <el-form-item prop="projectOwnerName" :rules="projectRole.projectOwnerName">
          <span slot="label" style="" @click="ownerChooseModal()"><a herf="#">项目负责人</a></span>
          <el-input v-model="dataForm.projectOwnerName" readonly style="width: 274px"  @focus="ownerChooseModal()"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" label-width="100px" >
        <el-form-item :label="'客户应用/要求'">
          <el-input v-model="dataForm.customerRemark" style="width: 562px" ></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" label-width="100px" >
        <el-form-item :label="'其他要求'">
          <el-input v-model="dataForm.remark" style="width: 562px" ></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" label-width="100px" :rules="projectRole">
        <el-form-item prop="userRoleName" :rules="projectRole.userRoleName">
          <span slot="label" style="" @click="userRollModal()"><a herf="#">项目权限</a></span>
          <el-input v-model="dataForm.userRoleName" style="width: 562px" @focus="userRollModal()"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dataFormSubmit()">{{'确定'}}</el-button>
        <el-button type="primary" @click="visible = false">{{'关闭'}}</el-button>
      </span>
    </el-dialog>
    <el-dialog
      width="530px"
      title="项目经理"
      :close-on-click-modal="false"
      :visible.sync="managerFlag">
      <el-transfer class="rq" filterable v-model="projectManagerList"  :props="{
      key: 'operatorId',
      label: 'operatorName'
    }" :data="operatorList" :titles="['未选择', '已选择']"></el-transfer>
      <span slot="footer" class="dialog-footer">
        <div style="margin-top: 5px">
                <el-button type="primary" @click="saveManagerList()">确定</el-button>
                <el-button @click="managerFlag = false" type="primary">取消</el-button>
        </div>
    </span>
    </el-dialog>

    <el-dialog
      width="530px"
      title="项目负责人"
      :close-on-click-modal="false"
      :visible.sync="ownerFlag">
      <el-transfer class="rq" filterable v-model="projectOwnerList"  :props="{
      key: 'operatorId',
      label: 'operatorName'
    }" :data="operatorList" :titles="['未选择', '已选择']"></el-transfer>
      <span slot="footer" class="dialog-footer">
        <div style="margin-top: 5px">
                <el-button type="primary" @click="saveOwnerList()">确定</el-button>
                <el-button @click="ownerFlag = false" type="primary">取消</el-button>
        </div>
    </span>
    </el-dialog>

    <el-dialog
      width="530px"
      title="权限"
      :close-on-click-modal="false"
      :visible.sync="userRoleFlag">
      <el-table
        :data="userRoleList"
        border
        :height="300"
        v-loading="false"
        style="width: 100%;">
        <el-table-column
          prop="username"
          header-align="center"
          align="center"
          min-width="35"
          label="账号">
        </el-table-column>
        <el-table-column
          prop="userDisplay"
          header-align="center"
          align="center"
          min-width="35"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop=""
          header-align="center"
          align="center"
          min-width="30"
          label="">
          <template slot-scope="scope">
            <!-- 如果数据为Y，显示勾选框，否则不勾选 -->
            <el-checkbox v-model="scope.row.checkAll"  @change="changeAll(scope.row)"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          header-align="center"
          align="center"
          min-width="30"
          label="查询">
          <template slot-scope="scope">
            <!-- 如果数据为Y，显示勾选框，否则不勾选 -->
            <el-checkbox v-model="scope.row.searchCheck"  @change="changeCheck(scope.row,1)"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          header-align="center"
          align="center"
          min-width="30"
          label="修改">
          <template slot-scope="scope">
            <!-- 如果数据为Y，显示勾选框，否则不勾选 -->
            <el-checkbox v-model="scope.row.updateCheck"  @change="changeCheck(scope.row,2)"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          header-align="center"
          align="center"
          min-width="30"
          label="下载">
          <template slot-scope="scope">
            <!-- 如果数据为Y，显示勾选框，否则不勾选 -->
            <el-checkbox v-model="scope.row.downCheck"  @change="changeCheck(scope.row,3)"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          header-align="center"
          align="center"
          min-width="30"
          label="删除">
          <template slot-scope="scope">
            <!-- 如果数据为Y，显示勾选框，否则不勾选 -->
            <el-checkbox v-model="scope.row.deleteCheck"  @change="changeCheck(scope.row,4)"></el-checkbox>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <div style="margin-top: 5px">
                <el-button type="primary" @click="saveUserList()">确定</el-button>
                <el-button @click="userRoleFlag = false" type="primary">取消</el-button>
        </div>
    </span>
    </el-dialog>
    <Chooselist ref="baseList"  @getBaseData="getBaseData"></Chooselist>
  </div>
</template>

<script>
  import {projectInfoSearch,
  searchOperatorWithSite,
    searchProjectTeamStr,
    searchUserRoll,
    saveProjectInfo,
  } from "@/api/project/project.js"
  import Chooselist from '@/views/modules/common/Chooselist'
  import DictDataSelect from "../../sys/dict-data-select.vue";
  export default {
    components: {
      DictDataSelect,
      Chooselist
    },
    data () {
      return {
        tagNo:'',
        tagNo1:'',
        visible: false,
        treeVisible: false,
        managerFlag:false,
        userRoleFlag:false,
        ownerFlag:false,
        operatorList:[],
        dataForm: {
          id: 0,
          site:this.$store.state.user.site,
          projectLevel:1,
          projectId:'',
          projectTypeDb:'',
          projectType:'',
          customerName:'',
          customerId:'',
          projectName:'',
          projectDesc:'',
          needDate:'',
          priority:'',
          projectSource:'',
          priorityDesc:'',
          projectSourceDesc:'',
          projectManagerName:'',
          projectOwnerName:'',
          customerRemark:'',
          remark:'',
          userRoleName:'',
          projectManagerList:[],
          projectOwnerList:[],
          userRoleList:[],
          buNo:[],
          buDesc:[],
        },
        projectManagerList:[],
        projectOwnerList:[],
        userRoleList:[],
        projectRole: {
          projectLevel: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          projectType: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          customerName: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          projectName: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          buDesc: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          projectSourceDesc: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          priorityDesc: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          needDate: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          projectManagerName: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          projectOwnerName: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          userRoleName: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
        }
      }
    },
    created () {

    },
    methods: {
      // 获取基础数据列表S
      getBaseList (val, type) {
        this.tagNo = val
        this.tagNo1 = type
        this.$nextTick(() => {
          let strVal = ''
          if (val === 1010) {
            if(type==1) {
              strVal = this.dataForm.projectTypeDb
            }
          }
          if (val === 106) {
            if(type==1) {
              strVal = this.dataForm.buNo
            }
          }
          if (val === 102) {
            if(type==1) {
              strVal = this.dataForm.customerId
            }
          }
          if (val === 1011) {
            if(type==1) {
              strVal = this.dataForm.projectSource
            }
          }
          if (val === 1012) {
            if(type==1) {
              strVal = this.dataForm.priority
            }
          }
          this.$refs.baseList.init(val, strVal)
        })
      },
      /* 列表方法的回调 */
      getBaseData (val) {
        if (this.tagNo === 1010) {
          if(this.tagNo1==1) {
            this.dataForm.projectTypeDb = val.Base_id
            this.dataForm.projectType = val.Base_desc
          }
        }
        if (this.tagNo === 102) {
          if(this.tagNo1==1) {
            this.dataForm.customerId = val.Customer_no
            this.dataForm.customerName = val.Customer_desc
          }
        }
        if (this.tagNo === 1011) {
          if(this.tagNo1==1) {
            this.dataForm.projectSource = val.Base_id
            this.dataForm.projectSourceDesc = val.Base_desc
          }
        }
        if (this.tagNo === 1012) {
          if(this.tagNo1==1) {
            this.dataForm.priority = val.Base_id
            this.dataForm.priorityDesc = val.Base_desc
          }
        }
        if (this.tagNo === 106) {
          if(this.tagNo1==1) {
            this.dataForm.buNo = val.Bu_no
            this.dataForm.buDesc = val.Bu_desc
          }
        }
      },
      init (id) {
        this.dataForm.id = id || 0
        if(this.dataForm.id!=0){
          let inData={
            page: 1,
            limit: 10,
            id:id
          }
          projectInfoSearch(inData).then(({data}) => {
            if(data.page.list.length>0){
              this.dataForm= data.page.list[0];
              let inData={
                site:this.dataForm.site,
                projectId:this.dataForm.projectId,
                type:'manager',
              }
              searchProjectTeamStr(inData).then(({data}) => {
                this.dataForm.projectManagerList=data.rows
              })
              let inData2={
                site:this.dataForm.site,
                projectId:this.dataForm.projectId,
                type:'owner',
              }
              searchProjectTeamStr(inData2).then(({data}) => {
                this.dataForm.projectOwnerList=data.rows
              })
              let inData3={
                site:this.dataForm.site,
                projectId:this.dataForm.projectId,
              }
              searchUserRoll(inData3).then(({data}) => {
                this.dataForm.userRoleList=data.rows
              })
            }
          })
        }else {
          this.dataForm={
            id: 0,
            site:this.$store.state.user.site,
            projectLevel:1,
            projectId:'',
            projectTypeDb:'',
            projectType:'',
            customerName:'',
            customerId:'',
            projectName:'',
            projectDesc:'',
            needDate:'',
            priority:'',
            projectSource:'',
            priorityDesc:'',
            projectSourceDesc:'',
            projectManagerName:'',
            projectOwnerName:'',
            customerRemark:'',
            remark:'',
            userRoleName:'',
            projectManagerList:[],
            projectOwnerList:[],
            buNo:'',
            buDesc:'',
          }
          let inData={
            site:this.dataForm.site,
            projectId:this.dataForm.projectId,
          }
          searchUserRoll(inData).then(({data}) => {
            this.dataForm.userRoleList=data.rows
          })
        }
        this.visible = true
      },

      managerChooseModal(){
        let inData={
          site:this.dataForm.site,
          projectId:this.dataForm.projectId,
        }
        searchOperatorWithSite(inData).then(({data}) => {
          this.operatorList=data.rows
        })
        this.projectManagerList = JSON.parse(JSON.stringify(this.dataForm.projectManagerList));
        this.managerFlag=true
      },
      saveManagerList(){
        let projectManagerName='';
        for (let i = 0; i < this.projectManagerList.length; i++) {
          let select= this.operatorList.filter(item => item.operatorId === this.projectManagerList[i])
          if(select.length>0){
            projectManagerName+=select[0].operatorName+';'
          }
        }
        this.dataForm.projectManagerName=projectManagerName
        this.dataForm.projectManagerList=JSON.parse(JSON.stringify(this.projectManagerList));
        this.managerFlag=false
      },
      ownerChooseModal(){
        let inData={
          site:this.dataForm.site,
          projectId:this.dataForm.projectId,
        }
        searchOperatorWithSite(inData).then(({data}) => {
          this.operatorList=data.rows
        })
        this.projectOwnerList = JSON.parse(JSON.stringify(this.dataForm.projectOwnerList));
        this.ownerFlag=true
      },
      saveOwnerList(){
        let projectOwnerName='';
        for (let i = 0; i < this.projectOwnerList.length; i++) {
          let select= this.operatorList.filter(item => item.operatorId === this.projectOwnerList[i])
          if(select.length>0){
            projectOwnerName+=select[0].operatorName+';'
          }
        }
        this.dataForm.projectOwnerName=projectOwnerName
        this.dataForm.projectOwnerList=JSON.parse(JSON.stringify(this.projectOwnerList));
        this.ownerFlag=false
      },
      userRollModal(){
        this.userRoleList=JSON.parse(JSON.stringify(this.dataForm.userRoleList));
        for (let i = 0; i <this.userRoleList.length ; i++) {
          if(this.userRoleList[i].username==this.$store.state.user.name){
            this.userRoleList[i].searchCheck=true;
            this.userRoleList[i].updateCheck=true;
            this.userRoleList[i].downCheck=true;
            this.userRoleList[i].deleteCheck=true;
            this.userRoleList[i].searchFlag='Y'
            this.userRoleList[i].updateFlag='Y'
            this.userRoleList[i].downFlag='Y'
            this.userRoleList[i].deleteFlag='Y'
          }
        }
        this.userRoleFlag=true
      },
      saveUserList(){
        for (let i = 0; i <this.userRoleList.length ; i++) {
          if(this.userRoleList[i].username==this.$store.state.user.name){
            this.userRoleList[i].searchCheck=true;
            this.userRoleList[i].updateCheck=true;
            this.userRoleList[i].downCheck=true;
            this.userRoleList[i].deleteCheck=true;
            this.userRoleList[i].searchFlag='Y'
            this.userRoleList[i].updateFlag='Y'
            this.userRoleList[i].downFlag='Y'
            this.userRoleList[i].deleteFlag='Y'
          }
        }
        let name= '';
        for (let i = 0; i < this.userRoleList.length; i++) {
          if(this.userRoleList[i].searchCheck||this.userRoleList[i].updateCheck||this.userRoleList[i].downCheck||this.userRoleList[i].deleteCheck){
            name+=this.userRoleList[i].userDisplay+';'
          }
        }
        this.dataForm.userRoleName=name
        this.dataForm.userRoleList=JSON.parse(JSON.stringify(this.userRoleList));
        this.userRoleFlag=false
      },
      changeAll(row){
        if(row.checkAll){
          row.searchCheck=true;
          row.updateCheck=true;
          row.downCheck=true;
          row.deleteCheck=true;
          row.searchFlag='Y'
          row.updateFlag='Y'
          row.downFlag='Y'
          row.deleteFlag='Y'
        }else {
          row.searchCheck=false;
          row.updateCheck=false;
          row.downCheck=false;
          row.deleteCheck=false;
          row.searchFlag='N'
          row.updateFlag='N'
          row.downFlag='N'
          row.deleteFlag='N'
        }
      },
      changeCheck(row,type){
        if(type==1){
          if(row.searchCheck){
            row.searchFlag='Y'
          }else {
            row.searchFlag='N'
          }
        }
        if(type==2){
          if(row.updateCheck){
            row.updateFlag='Y'
          }else {
            row.updateFlag='N'
          }
        }
        if(type==3){
          if(row.downCheck){
            row.downFlag='Y'
          }else {
            row.downFlag='N'
          }
        }
        if(type==4){
          if(row.deleteCheck){
            row.deleteFlag='Y'
          }else {
            row.deleteFlag='N'
          }
        }
        if(row.searchCheck&&row.updateCheck&&row.downCheck&&row.deleteCheck){
          row.checkAll=true
        }else{
          row.checkAll=false
        }
        this.$forceUpdate();
      },
      // 表单提交
      dataFormSubmit () {
        if(this.dataForm.projectTypeDb==''||this.dataForm.projectTypeDb==null){
            this.$alert('请选择项目类型！', '错误', {
              confirmButtonText: '确定'
            })
            return false;
          }
        if(this.dataForm.customerId==''||this.dataForm.customerId==null){
          this.$alert('请选择所属客户！', '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }
        if(this.dataForm.projectName==''||this.dataForm.projectName==null){
          this.$alert('请输入项目名称！', '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }
        if(this.dataForm.projectSource==''||this.dataForm.projectSource==null){
          this.$alert('请选择项目来源！', '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }
        if(this.dataForm.buDesc==''||this.dataForm.buDesc==null){
          this.$alert('请选择BU！', '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }
        if(this.dataForm.priority==''||this.dataForm.priority==null){
          this.$alert('请选择优先级！', '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }
        if(this.dataForm.needDate==''||this.dataForm.needDate==null){
          this.$alert('请选择要求日期！', '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }
        if(this.dataForm.projectManagerName==''||this.dataForm.projectManagerName==null){
          this.$alert('请选择项目经理！', '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }
        if(this.dataForm.projectOwnerName==''||this.dataForm.projectOwnerName==null){
          this.$alert('请选择项目负责人！', '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }
        if(this.dataForm.userRoleName==''||this.dataForm.userRoleName==null){
          this.$alert('请选择权限！', '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }
        saveProjectInfo(this.dataForm).then(({data}) => {
          if (data && data.code === 0) {
            this.$message.success( '操作成功')
            this.visible = false
            this.$emit('refreshDataList')
          } else {
            this.$message.error(data.msg)
          }
        })

      },
    },
  }
</script>

<style >
  .el-transfer-panel {
    border: 2px solid #17b3a3;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    width: 200px;
    max-height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
  }

  .el-transfer-panel .el-transfer-panel__header {
    height: 40px;
    line-height: 40px;
    background: #17b3a3;
    margin: 0;
    padding-left: 15px;
    border-bottom: 1px solid #17b3a3;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #000;
  }

  .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
    font-size: 14px;
    color: #303133;
    font-weight: 400;
  }
</style>
