import { reactive } from 'vue'
import './ConfigView.scss'
import { ElMessage } from 'element-plus'
import login from 'src/api/login'
import { indexStore } from 'lib/stores'
export default {
  setup() {
    const store = indexStore()
    const bean = reactive({
      resetPasswordDialogShow: false,
      resetPasswordInput: '',
      resetPasswordInputOld: '',
      resetPasswordInputTwo: '',

      editorConfigDialogShow: false,
      editorConfigInfo: {
        oa_appid: '',
        oa_secret: '',
        link_prev:'',
        show_conn:"false",
        show_seal:"false",
        // service_phone: '',
        // service_qrcode: {
        //   url: ''
        // },
        service_weixin:"",
        robot_key:'',
        // service_type: '1',
        front_host: '',
        back_host: '',
        privacy: '',
        user: ''
      }
    })
    const methods = reactive({
      handleEditorConfigSubmit() {
        login.editorConfig(bean.editorConfigInfo).then((res: any) => {
          if (res.code == 0) {
            ElMessage.success('配置修改成功')
          } else {
            ElMessage.success('配置修改失败')
          }
          methods.updateConfig()
          bean.editorConfigDialogShow = false
        })
      },
      handleResetPasswordSubmit() {
        if (bean.resetPasswordInputOld === '') {
          ElMessage.error('旧密码不能为空')
          return
        }
        if (bean.resetPasswordInput === '') {
          ElMessage.error('密码不能为空')
          return
        }
        if (bean.resetPasswordInput !== bean.resetPasswordInputTwo) {
          ElMessage.error('两次输入的密码不一致')
          return
        }
        login
          .resetPassWord({
            old_password: bean.resetPasswordInputOld,
            password: bean.resetPasswordInput
          })
          .then((res: any) => {
            if (res.code === 0) {
              ElMessage.success('密码修改成功')
              setTimeout(() => {
                store.logout()
              }, 1000)
            } else {
              ElMessage.error(res.message)
            }
          })
      },
      updateConfig() {
        login.getConfig().then((res) => {
          bean.editorConfigInfo = res.data
        })
      }
    })
    methods.updateConfig()
    return () => {
      return (
        <div class="page" style="height: 100%;display: flex;flex-direction: column;">
          {/* <el-tabs vModel={state.activeName} type="card" class="tabs">
            <el-tab-pane label="修改密码" name="1">
              <el-form label-width="80">
                <el-form-item label="旧密码">
                  <el-input type="password" vModel={bean.resetPasswordInputOld}></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                  <el-input type="password" vModel={bean.resetPasswordInput}></el-input>
                </el-form-item>
                <el-form-item label="再次输入">
                  <el-input type="password" vModel={bean.resetPasswordInputTwo}></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    onClick={() => {
                      methods.handleResetPasswordSubmit()
                    }}
                  >
                    确定
                  </el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="修改配置" name="2"> */}
          <el-form label-width="100" class="tabs">
            <el-form-item label="APPID">
              <el-input vModel={bean.editorConfigInfo.oa_appid}></el-input>
            </el-form-item>
            <el-form-item label="SECRET">
              <el-input vModel={bean.editorConfigInfo.oa_secret}></el-input>
            </el-form-item>
            <el-form-item label="客服链接">
              <el-input vModel={bean.editorConfigInfo.service_weixin}></el-input>
            </el-form-item>
            {/* <el-form-item label="客服类型">
              <el-select vModel={bean.editorConfigInfo.service_type}>
                <el-option label="手机" value="1"></el-option>
                <el-option label="二维码" value="2"></el-option>
              </el-select>
            </el-form-item>
            {bean.editorConfigInfo.service_type == '1' ? (
              <el-form-item label="电话号码">
                <el-input vModel={bean.editorConfigInfo.service_phone}></el-input>
              </el-form-item>
            ) : (
              <el-form-item label="二维码">
                <el-upload
                  class="upload-flie"
                  action="/corpapi/corp/config/upload"
                  headers={{
                    'x-token': store.$state.token,
                    'x-host': window.location.host
                    // 'x-host': 'a1.batiao8.com'
                  }}
                  show-file-list={false}
                  onSuccess={(response: any) => {
                    bean.editorConfigInfo.service_qrcode = response.data
                  }}
                >
                  {bean.editorConfigInfo.service_qrcode ? (
                    <img class="uploaded-img" src={bean.editorConfigInfo.service_qrcode.url} />
                  ) : (
                    <el-icon class="avatar-uploader-icon">
                      <Plus />
                    </el-icon>
                  )}
                </el-upload>
              </el-form-item>
            )} */}
            {/* front_host:"",
            back_host:"",
            privacy:"",
            user:"" */}
            <el-form-item label="前端域名">
              <el-input vModel={bean.editorConfigInfo.front_host}></el-input>
            </el-form-item>
            <el-form-item label="后端域名">
              <el-input vModel={bean.editorConfigInfo.back_host}></el-input>
            </el-form-item>
            <el-form-item label="机器人配置">
              <el-input vModel={bean.editorConfigInfo.robot_key}></el-input>
            </el-form-item>
            <el-form-item label="隐私政策">
              <el-input type="textarea" vModel={bean.editorConfigInfo.privacy}></el-input>
            </el-form-item>
            <el-form-item label="用户协议">
              <el-input type="textarea" vModel={bean.editorConfigInfo.user}></el-input>
            </el-form-item>
            <el-form-item label="链接前缀">
              <el-input type="textarea" vModel={bean.editorConfigInfo.link_prev}></el-input>
            </el-form-item>
            <el-form-item label="查看联络人">
              <el-switch vModel={bean.editorConfigInfo.show_conn} activeValue={'true'} inactiveValue={'false'}></el-switch>
            </el-form-item>
            <el-form-item label="打印公章">
              <el-switch vModel={bean.editorConfigInfo.show_seal} activeValue={'true'} inactiveValue={'false'}></el-switch>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                onClick={() => {
                  methods.handleEditorConfigSubmit()
                }}
              >
                确定
              </el-button>
            </el-form-item>
          </el-form>
          {/* </el-tab-pane>
          </el-tabs> */}
        </div>
      )
    }
  }
}